Javascript 换行第n个或更少的元素，结果错误

我在wordpress中有下拉菜单，我对wrap n（每四个元素）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>

测试1
测试2




测试3
测试4
测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12

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>");
}

var divs=$（“ul.sub-menu>li”）；
对于（变量i=0；i

我的结果（错）

测试1
测试2
测试3
测试4




测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12

我努力实现的目标：

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

测试1
测试2




测试3
测试4
测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12

---

知道我做错了什么吗？这是必要的，因为“第3项”和“第4项”是不同的类别，我的代码是li元素混合，如果在第一个ul中少于4项

哇，你刚才所做的，我不知道这是可能的。：） 无论如何：

$（'.sub-menu'）。每个（函数（）{
var children=$（this.find（'>li'）；
对于（变量i=0；i

这将使用您尝试过的功能，但它将独立地在每个子菜单中循环，并且项目将正确分组

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

$('.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>");
    }
});