Use jQuery to split multiple unordered lists in two equal lists -

i'm building menu simple unordered list. menu have top level , 1 sub level. goal make 2 column layout submenus , have working static html , css this. problem need make work dynamic list.

basically need jquery script go through submenu lists , split them 2 equal submenu lists. top level menus have unique class , great if script add unique classes new submenu list (column01, column02).

here source code:

<ul>   <li class="menu01">      <a href="#">first menu</a>     <ul>       <li>first 01</li>       <li>first 02</li>       <li>first 03</li>       <li>first 04</li>       <li>first 05</li>     </ul>   </li>   <li class="menu02">      <a href="#">second menu</a>     <ul>       <li>second 01</li>       <li>second 02</li>       <li>second 03</li>       <li>second 04</li>       <li>second 05</li>     </ul>   </li> </ul> 

and achieve:

<ul>   <li class="menu01">      <a href="#">first menu</a>     <ul class="column01">       <li>first 01</li>       <li>first 02</li>       <li>first 03</li>     </ul>     <ul class="column02">       <li>first 04</li>       <li>first 05</li>     </ul>   </li>   <li class="menu02">      <a href="#">second menu</a>     <ul class="column01">       <li>second 01</li>       <li>second 02</li>       <li>second 03</li>     </ul>     <ul class="column01">       <li>second 04</li>       <li>second 05</li>     </ul>   </li> </ul> 

you can grab on jsfiddle.

thanks!

css elegant way go. if users not use modern browser, can following:

$(".menu01 > ul, .menu02 > ul").each(function() {     var $ul = $(this).addclass("column01"), // let original first column         $lis = $ul.children(), // find children `li` elements         mid = math.floor($lis.length / 2), // calculate split         $newcol = $('<ul />', {"class": "column02"}).insertafter($ul); // create new column , add after original. "class" needs in quotes because it's reserved keyword      $lis.each(function(i) {         > mid && $(this).appendto($newcol); // move `li` elements index greater middle     }); }); 

(working demo)

output:

  <li class="menu01">      <a href="#">first menu</a>     <ul class="column01">       <li>first 01</li>       <li>first 02</li>       <li>first 03</li>     </ul>     <ul class="column02">       <li>first 04</li>       <li>first 05</li>     </ul>   </li>   <li class="menu02">      <a href="#">second menu</a>     <ul class="column01">       <li>second 01</li>       <li>second 02</li>       <li>second 03</li>     </ul>     <ul class="column02">       <li>second 04</li>       <li>second 05</li>     </ul>   </li>