包装第n个或更少的元素，错误的结果

Question

我有WordPress的下拉菜单，我有一个小包装nth（每第四个元素）li的问题。

我的代码

<li id="item1"> ... </li> 
<li id="item2"> ... </li> 
<li id="item3"> 
    <ul class="sub-menu"> 
     <li> Test1</li> 
     <li> Test2</li> 
    </ul> 
</li> 
<li id="item4"> 
    <ul class="sub-menu"> 
     <li> Test3</li> 
     <li> Test4</li> 
     <li> Test5</li> 
     <li> Test6</li> 
     <li> Test7</li> 
     <li> Test8</li> 
     <li> Test9</li> 
     <li> Test10</li> 
     <li> Test11</li> 
     <li> Test12</li> 
    </ul> 
</li> 

jQuery代码

var divs = $("ul.sub-menu > li"); 
for(var i = 0; i < divs.length; i+=4) { 
divs.slice(i, i+4).wrapAll("<div class='column'></div>"); 
} 

我的结果（错误）

<li id="item1"> ... </li> 
    <li id="item2"> ... </li> 
    <li id="item3"> 
     <ul class="sub-menu"> 
      <div class="column"> 
       <li> Test1</li> 
       <li> Test2</li> 
       <li> Test3</li> 
       <li> Test4</li> 
      </div> 
     </ul> 
    </li> 
    <li id="item4"> 
     <ul class="sub-menu"> 
      <div class="column"> 
       <li> Test5</li> 
       <li> Test6</li> 
       <li> Test7</li> 
       <li> Test8</li> 
      </div> 
      <div class="column"> 
       <li> Test9</li> 
       <li> Test10</li> 
       <li> Test11</li> 
       <li> Test12</li> 
      </div> 

     </ul> 
    </li> 

我尝试实现：

<li id="item1"> ... </li> 
    <li id="item2"> ... </li> 
    <li id="item3"> 
     <ul class="sub-menu"> 
      <div class="column"> 
       <li> Test1</li> 
       <li> Test2</li> 
      </div> 
     </ul> 
    </li> 
    <li id="item4"> 
     <ul class="sub-menu"> 
      <div class="column"> 
       <li> Test3</li> 
       <li> Test4</li> 
       <li> Test5</li> 
       <li> Test6</li> 
      </div> 
      <div class="column"> 
       <li> Test7</li> 
       <li> Test8</li> 
       <li> Test9</li> 
       <li> Test10</li> 
      </div> 
      <div class="column"> 
       <li> Test11</li> 
       <li> Test12</li> 
      </div> 

     </ul> 
    </li> 

任何想法我做错了什么？这是必要的，因为“项目3”和“项目4”是diffrents类别，并与我的代码李元素混合，如果在第一个ul是少于4个项目

Answer 1

哇，你刚刚做了什么，我不知道这是可能的。 :) 总之：

$('.sub-menu').each(function() { 
    var children = $(this).find('> li'); 
    for (var i = 0; i < children.length; i+=4) { 
     children.slice(i, i+4).wrapAll("<div class='column'></div>"); 
    } 
}); 

这将使用您是否尝试过的功能，但它会遍历所有的子菜单独立和项目将在适当分组。

http://jsfiddle.net/9NUwJ/