javascript - 使用 JavaScript/jQuery 对一组列表元素进行排序和分隔

Question

我有一个问题 对列表进行排序(您可以使用默认的 JS/jquery 排序功能) 将排序列表分成不同的子列表，每个子列表最多包含“x”项，“x”是您传入的参数。以上 示例结果假设 x=2

<ul>
   <li> 4 </li>
   <li> 1 </li>
   <li> 7 </li>
   <li> 5 </li>
   <li> 3 </li>
 </ul>

写一个函数把它转换成

<ul>
    <li> 1 </li>
    <li> 3 </li>
</ul>
 <ul>
    <li> 4 </li>
    <li> 5 </li>
</ul>
<ul>
    <li> 7 </li>
</ul>

请在合理范围内随意使用您喜欢的任何库/引用资料(即，不要使用具有“splitList”功能的库)。关键是在 DOM 操作方面尽可能高效地做到这一点。

我通过创建单独的列表并删除了原始列表解决了这个问题，但我想知道我们如何通过只修改现有的列表来做到这一点。(我的意思是在遍历时即时修改)

Answer 1

首先是html:

<ul id="list">
   <li> 4 </li>
   <li> 1 </li>
   <li> 7 </li>
   <li> 5 </li>
   <li> 3 </li>
</ul>
<div id="container"></div>

javascript(jquery):

function sortText(a,b){  
    return $(a).text().trim() > $(b).text().trim() ? 1 : -1;  
};
var ul = $('#list');
var elements = ul.find('li').detach();
var i=2;
var lastul;
var container = $('#container');
elements.sort(sortText).each(function(index){
    if (index % i === 0) {
        container.append(lastul);
        lastul = $('<ul></ul>');
    }
    lastul.append(elements[index]);
})
container.append(lastul);
ul.remove();