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

Answer 2

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>

Answer 3

最有效的排序方法是使用原生Array.sort方法（jQuery().sort实现Array.sort）。 小提琴：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.

如 this demo 所示，结果如下：

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

Answer 4

这部分地使用了我在divides elements into groups之前写的答案，并添加了首先对它们进行排序：

Working demo: 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>元素非常重要，这将使大型集合上的操作更快。

Answer 5

如果您必须操纵DOM，我相信您的问题已得到解答。但...

DOM manipulation是slow。 Concatenate strings also

排序功能取自此处：How may I sort a list alphabetically using jQuery?

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

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

5 个答案: