Wrap selection content in div using styleSet

I have some pre-defined div classes and want to wrap selection content with one of them. Here is what I did:

CKEDITOR.stylesSet.add('my-styles',
[
{ name : 'block1', element : 'div',attributes: { 'class' : 'hidden', 'title' : 'block1' } },
{ name : 'block2', element : 'div', attributes: { 'class' : 'hidden', 'title' : 'block2' } },
{ name : 'block3', element : 'div', attributes: { 'class' : 'hidden', 'title' : 'block3' } },
{ name : 'block4', element : 'div', attributes: { 'class' : 'hidden', 'title' : 'block4' } }
]
);

However, it applied the div tag to each individual block items in the selection. For example,

<ul>
  <li>item1</li>
  <li>item2</li>
</ul>

became

<ul>
  <li><div class="hidden" title="block1">item1</div></li>
  <li><div class="hidden" title="block1">item2</div></li>
</ul>

What I want is one <div class="hidden" title="block1"> wraping the <ul>

I found something in mindtouch looks good:
http://developer.mindtouch.com/en/kb/Wr ... tor_plugin

Is there any plugin for CKEditor 3.x to achieve it?