使用jQuery在两个相等的列表中拆分多个无序列表

Question

我从简单的无序列表构建菜单。菜单将只有顶级和一个子级别。目标是为子菜单制作两个列布局，并且我已经为此工作了静态HTML和CSS。唯一的问题是我需要使用动态列表工作。

基本上我需要jQuery脚本，将通过所有子菜单列表并将它们分成两个相同的子菜单列表。顶级菜单具有独特的类，如果脚本可以将新的子菜单添加到新的子菜单列（column01，column02）中，那就太好了。

这里是源代码：

<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> 

这是我想达到的目标：

<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> 

你也可以抓住这个在jsFiddle。

谢谢！

Answer 1

CSS是最好的方法。如果用户没有使用最新的浏览器，你可以做到以下几点：

$(".menu01 > ul, .menu02 > ul").each(function() { 
    var $ul = $(this).addClass("column01"), // Let original be first column 
     $lis = $ul.children(), // Find all children `li` elements 
     mid = Math.floor($lis.length/2), // Calculate where to split 
     $newCol = $('<ul />', {"class": "column02"}).insertAfter($ul); // Create new column and add after original. "class" needs to be in quotes because it's a reserved keyword 

    $lis.each(function(i) { 
     i > mid && $(this).appendTo($newCol); // Move `li` elements with index greater than middle 
    }); 
}); 

（Working demo）

输出：

<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>