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

Posted 2023-05-09

【中文标题】包裹第 n 个或更少的元素，错误的结果

【英文标题】：Wrap n-th or less element, wrong result

【发布时间】：2014-01-28 13:35:58

【问题描述】：

我在 wordpress 中有下拉菜单，但我对 wrap nth(every 4th element) 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>

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

【参考方案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/