動的

Question

私はhtmlの次ているUL-LIのナビゲーションを行います。

<div id="nav"> 
    <ul> 
     <li class="keyitem">keyitem 1</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li class="keyitem">keyitem 2</li> 
     <li>item</li> 
     <li>item</li> 
     <li class="keyitem"></li> 
     <li>item</li> 
     <li>item</li> 
    </ul> 
</div> 

しかし、私は次のように上記のようにしたい：

<div id="nav"> 
    <ul> 
     <li class="keyitem">one 
     <ul> 
      <li class="child_one">item</li> 
      <li class="child_one">item</li> 
      <li class="child_one">item</li> 
     </ul> 
     </li> 
     <li class="keyitem">two 
     <ul> 
      <li class="child_two">item</li> 
      <li class="child_two">item</li> 
     </ul> 
     </li> 
     <li class="keyitem">three 
     <ul> 
      <li class="child_three">item</li> 
      <li class="child_three">item</li> 
     </ul> 
     </li> 
    </ul> 
</div> 

ない可能性がコードの構造の最初のスニペットを変更するには。最初のスニペットを2番目のスニペットのように作成し、最初のスニペットと置き換える必要があります。

お願いします。事前に

おかげで..

Answer 1

var childClasses = ['child_one', 'child_two', 'child_three' /* more here */]; 
$('#nav li.keyitem').each(function(i) { 
    var $li = $(this), 
     $sub = $li.nextUntil('li.keyitem').addClass(childClasses[i]); 

    $('<ul />').appendTo($li).append($sub); 
}); 

が生成されます。

<div id="nav"> 
    <ul> 
     <li class="keyitem">keyitem 1 
     <ul> 
      <li class="child_one">item</li> 
      <li class="child_one">item</li> 
      <li class="child_one">item</li> 
     </ul> 
     </li> 
     <li class="keyitem">keyitem 2 
     <ul> 
      <li class="child_two">item</li> 
      <li class="child_two">item</li> 
     </ul> 
     </li> 
     <li class="keyitem">keyitem 3 
     <ul> 
      <li class="child_three">item</li> 
      <li class="child_three">item</li> 
     </ul> 
     </li> 
    </ul> 
</div> 

（demo）