jQueryを使用して複数のリストを複数のリストに分割する

Question

単純な順序付けられていないリストからメニューを構築しています。メニューにはトップレベルとサブレベルが1つしかありません。目標は、サブメニュー用の2つの列レイアウトを作成することです。私はすでにこのために静的なHTMLとCSSを使用しています。問題はダイナミックリストでこの作業を行う必要があることだけです。

基本的には、すべてのサブメニューリストを通過して2つの同等のサブメニューリストに分割する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>