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

Sort and separate a set of list elements using JavaScript/jQuery

本文关键字：列表元素 一组 排序 分离 JavaScript jQuery 使用      更新时间：2023-09-26

我有个问题对列表进行排序(可以使用默认的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操作方面尽可能高效地做到这一点。

我通过创建单独的列表来解决这个问题，并删除了原始列表，但我想知道如何只修改现有列表。(我的意思是在穿越时动态修改(

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();

var optionTexts = [];
        $("ul li").each(function() { optionTexts.push($(this).text()) });
        optionTexts.sort();
        //alert(optionTexts.length);
        var splityby = 2;//change this value how you want to split
        var itmes= parseInt(optionTexts.length/splityby);
        var remaining = optionTexts.length%splityby;
        //alert(itmes+'and'+remaining);
        var st='';
        var i=0;
        for(k=0;k<itmes+remaining;k++){
            st+='<ul>';
            for(j=0;j<splityby;j++){
                if(i<optionTexts.length){
                st+='<li>'+optionTexts[i++] +'</li>' ;
                }
            } 
            st+='</ul>';
        }
        $('#hi').append(st);

html

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

最有效的排序方法是使用本机Array.sort方法(jQuery().sort实现Array.sort(Fiddle：http://jsfiddle.net/RJEJQ/1/。

通过去掉jQuery，使用document.createElement()和普通的for()循环，代码可以变得更加高效。

var originalUl = $('ul');
var listElements = originalUl.children('li'); //List
listElements.sort(function(x, y){
    return parseInt(x.textContent, 10) - parseInt(y.textContent);
});
//Sorted by number, 1, 2, 3, ...
var newList = $(""); //Placeholder
listElements.each(function(i){
    if(i%2 == 0){ //If even, a new list has to be created
        originalUl.before(newList);
        newList = $("<ul>"); //Create new list
    }
    newList.append(this);
});
if(newList.length) { // If there are any remaining list elements in the holder.
    originalUl.before(newList);
}
originalUl.remove(); //Remove original, empty ul.

正如这个演示所示，结果看起来像：

ul
    li 1
    li 3
ul
    li 4
    li 5
ul
    li 7

这部分使用了我之前写的一个答案，该答案将元素划分为组，并添加了先排序的功能：

工作演示：http://jsfiddle.net/AndyE/QVRRn/
var i   = 0,
    ul  = $("ul"), 
    lis = ul.children().detach(),
    group;
// Sort the elements
lis.sort(function (a, b) {
    return $.text(a).localeCompare($.text(b));
});
// Wrap the elements
while ((group = lis.slice(i, i += 2)).length)
    group.wrapAll('<ul></ul>');
// Replace the original UL element
ul.replaceWith(lis.closest("ul"));

在操作<li>元素之前，将其从文档中分离是很重要的，这将使大型集合的操作速度更快。

如果您必须操作DOM，我相信您的问题已经得到了回答。但是

DOM操作很慢。还连接字符串。

排序函数取自这里：如何使用jQuery按字母顺序对列表进行排序？

现场演示：http://jsfiddle.net/gknjQ/1/

相关文章：