带有分隔列表的 for 循环答案

【问题标题】：for loop with divided list带有分隔列表的 for 循环
【发布时间】：2015-04-09 11:03:34
【问题描述】：

有78个项目的列表：

<ul>
    <li> 1 </li>
    <li> 2 </li>
    .
    .
    .
    <li> 78 </li> 
</ul>

我想将其分成 10 - 10 个块。

每个块将有 10 个项目。

结果将是 7 块 10 项和第 8 块 8 项。

<ul>
    <li> 1 </li>
    <li> 2 </li>
    .
    .
    .
    <li> 10 </li>
</ul>

<ul>
    <li> 11 </li>
    <li> 12 </li>
    .
    .
    .
    <li> 20 </li>
</ul><br>
.<br>
.<br>
.<br>
<ul>
    <li> 71 </li>
    <li> 72 </li>
    .
    .
    .
    <li> 78 </li>
</ul>

建议一个逻辑

【问题讨论】：

这并不是真正的 SO 工作方式。您需要提供一些您已经尝试解决此问题的代码。
你有数组中的列表元素或类似的东西吗？
请发tour around the website。
@BrunoToffolo：是的，document.querySelectorAll("ul > li") :-)

标签： javascript for-loop

【解决方案1】：

假设 ul 的 id 为 list：

var oldUL=document.getElementById('list');
var l = oldUL.children;
for(var i=0;i<l.length;i+=10){
 var newUL = document.createElement('ul');
 for(var s=0;s<10 && s<l.length;s++){
  newUL.appendChild(l[s]);
 }
 document.body.appendChild(newUl);
}
document.removeChild(oldUL)

【讨论】：

【解决方案2】：

尝试了自己的逻辑。工作代码链接是here

$(document).ready(function(){   
var listHtml = $('#list ul').html(),
    listLength = $('#list ul li').length;

var _html = '',l = listLength, helpAgent = l, counter = 1,_newList='';

for(var i = 1 ; i <= Math.ceil(l/10) ; i++){         
    var lim = 10;       
    if(helpAgent == (l%10)){
        lim = helpAgent;
    }
    helpAgent -= 10;

    _newList += "<ul>";
    for(var j = 1 ; j <= lim ; j++){ 
        _newList += "<li>" + $($('#list ul li')[counter-1]).html() + "</li>";
        counter++;
    }  
    _newList += "</ul>";
}
$("#result").html(_newList);});

这将适用于 2 位数限制（此处为 78）我使用 %10 来获取 2 位数的余数。

【讨论】：