使用 javascript 对 html 列表进行排序答案

【问题标题】：Sort an html list with javascript使用 javascript 对 html 列表进行排序
【发布时间】：2012-01-12 15:01:55
【问题描述】：

我有一组三个列表项，我想在页面加载时从高到低自动显示。理想情况下使用 jquery 或 javascript。

<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>

每个列表项都需要自己的 ID，因为它们都有各自的背景图像。数字必须是文本节点，以便用户可以编辑它们。

【问题讨论】：

看这里stackoverflow.com/q/1134976/771300
@maerics 我最初尝试使用数组 function listSort(a, B) { return a - b; } var n = ["10", "775", "40", "1125","1", "8"]; document.write(n.sort(listSort)); 从头开始构建它我已经按顺序重新排列列表，但无法确定它可以使用不同的列表 ID。

标签： javascript jquery html sorting html-lists

【解决方案1】：

这可能是最快的方法，因为它不使用 jQuery：

function sortList(ul){
    var new_ul = ul.cloneNode(false);

    // Add all lis to an array
    var lis = [];
    for(var i = ul.childNodes.length; i--;){
        if(ul.childNodes[i].nodeName === 'LI')
            lis.push(ul.childNodes[i]);
    }

    // Sort the lis in descending order
    lis.sort(function(a, b){
       return parseInt(b.childNodes[0].data , 10) - 
              parseInt(a.childNodes[0].data , 10);
    });

    // Add them into the ul in order
    for(var i = 0; i < lis.length; i++)
        new_ul.appendChild(lis[i]);
    ul.parentNode.replaceChild(new_ul, ul);
}

调用函数如下：

sortList(document.getElementsByClassName('list')[0]);

您可以以相同的方式对其他列表进行排序，如果您在与列表类相同的页面上有其他元素，您应该给您的 ul 一个 id 并使用它传递它。

Example JSFiddle

编辑

既然您提到您希望它发生在 pageLoad 上，我假设您希望它在 ul 位于 DOM 之后尽快发生，这意味着您应该将函数 sortList 添加到页面头部并使用它紧跟在您的列表之后，如下所示：

<head>
    ...
    <script type="text/javascript">
        function sortList(ul){
            var new_ul = ul.cloneNode(false);
            var lis = [];
            for(var i = ul.childNodes.length; i--;){
                if(ul.childNodes[i].nodeName === 'LI')
                    lis.push(ul.childNodes[i]);
            }
            lis.sort(function(a, b){
               return parseInt(b.childNodes[0].data , 10) - parseInt(a.childNodes[0].data , 10);
            });
            for(var i = 0; i < lis.length; i++)
                new_ul.appendChild(lis[i]);
            ul.parentNode.replaceChild(new_ul, ul);
        }
    </script>
</head>
<body>
    ...
    <ul class="list">
        <li id="alpha">32</li>
        <li id="beta">170</li>
        <li id="delta">28</li>
    </ul>
    <script type="text/javascript">
        !function(){
            var uls = document.getElementsByTagName('ul');
            sortList( uls[uls.length - 1] );
        }();
    </script>
    ...
</body>

【讨论】：

这很漂亮 - 很有魅力。现在试着剖析你写的东西..！
@danssker - 如果您已经在使用 jQuery，为什么要选择更复杂的原生 javascript 版本而不是更简单的 jQuery 版本？你真的能看到这样的操作的性能差异吗？我在这方面的口头禅是：首先要简单，只有在绝对需要时才增加复杂性。
为什么要克隆UL 节点？您只需将已排序的 LI 节点重新插入到原始的 UL 节点即可。
@jfriend00 克隆节点要快得多，因为浏览器不需要在每次 appendChild 后重新渲染。如果 ul 包含数千个 lis，则差异将在秒范围内。
@jfriend00 我的意思是回流而不是重新渲染

【解决方案2】：

你可以试试这个

var ul = $(".list:first");
var arr = $.makeArray(ul.children("li"));

arr.sort(function(a, b) {
    var textA = +$(a).text();
    var textB = +$(b).text();

    if (textA < textB) return -1;
    if (textA > textB) return 1;

    return 0;
});

ul.empty();

$.each(arr, function() {
    ul.append(this);
});

现场示例：http://jsfiddle.net/B7hdx/1

【讨论】：

您是否对您的实际示例进行了全面测试？它显示“170 28 32”
很好......如果我的网站已经在使用 jquery，我会使用它。

【解决方案3】：

你可以使用这个轻量级 jquery 插件List.js 原因

轻量级 [仅 3K 脚本]
使用类在您现有的 HTML 表格中轻松实现
可搜索、可排序和可过滤

HTML

<div id="my-list">
    <ul class="list">
       <li>
           <h3 class="name">Luke</h3>
       </li>
       <li>
           <h3 class="name">John</h3>
       </li>
    </ul>
</div>

Javascript

var options = {
    valueNames: ['name']
};
var myList = new List('my-list', options);

【讨论】：

【解决方案4】：

还有this small jQuery plugin。这将使您的排序无非是：

$('.list>li').tsort({attr:'id'});

【讨论】：

【解决方案5】：

假设只有一个 .list 项目，此代码将对该列表进行排序：

function sortList(selector) {
    var parent$ = $(selector);
    parent$.find("li").detach().sort(function(a, b) {
        return(Number(a.innerHTML) - Number(b.innerHTML));
    }).each(function(index, el) {
        parent$.append(el);
    });
}

sortList(".list");

你可以在这里看到它的工作原理：http://jsfiddle.net/jfriend00/FjuMB/

解释它是如何工作的：

它获取 .list 父对象。
它会找到所有<li> 子对象。
它从 DOM 中删除所有 <li> 子对象，但保留它们的数据
它使用自定义排序函数对 li 对象进行排序
自定义排序函数获取li标签中的HTML并将其转换为数字
然后，以新排序的顺序遍历数组，将每个 li 标签附加回原来的父标签。

结果是它们按排序顺序显示。

编辑：

这个改进的版本甚至可以一次对多个列表对象进行排序：

function sortList(selector) {
    $(selector).find("li").sort(function(a, b) {
        return(Number(a.innerHTML) - Number(b.innerHTML));
    }).each(function(index, el) {
        $(el).parent().append(el);
    });
}

sortList(".list");

演示：http://jsfiddle.net/jfriend00/RsLwX/

【讨论】：

【解决方案6】：

非 jquery 版本（原版 javascript）

优点：列表按原地排序，不会破坏 LI，也不会删除任何可能与它们关联的事件。它只是把事情打乱了

在 UL 中添加了一个 id：

<ul id="myList" class="list">
    <li id="alpha">32</li>
    <li id="beta">170</li>
    <li id="delta">28</li>
</ul>

和原版 javascript（没有 jquery）

// Grab a reference to the UL
var container = document.getElementById("myList");

// Gather all the LI's from the container
var contents = container.querySelectorAll("li");

// The querySelector doesn't return a traditional array
// that we can sort, so we'll need to convert the contents 
// to a normal array.
var list = [];
for(var i=0; i<contents.length; i++){
    list.push(contents[i]);
}

// Sort based on innerHTML (sorts "in place")
list.sort(function(a, b){
    var aa = parseInt(a.innerHTML);
    var bb = parseInt(b.innerHTML);
    return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

// We'll reverse the array because our shuffle runs backwards
list.reverse();

// Shuffle the order based on the order of our list array.
for(var i=0; i<list.length; i++){
    console.log(list[i].innerHTML);
    container.insertBefore(list[i], container.firstChild);
}

小提琴证明：https://jsfiddle.net/L27gpnh6/1/

【讨论】：

谢谢 Bob，这是迄今为止我找到的最佳解决方案。也可以使用数据属性parseInt(a.getAttribute(attr))
谢谢，这是一个按字母顺序排序的解决方案：list.sort(function(a, b){var aa = a.innerHTML;var bb = b.innerHTML;return aa.localeCompare(bb);});

【解决方案7】：

你可以用这个方法：

var mylist = $('ul');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

在此处查看文章： http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

编辑：有一个非常酷的 jquery 插件可以做到这一点：http://tinysort.sjeiti.com/

【讨论】：

【解决方案8】：

这样的事情应该会有所帮助：

var $parent = $(".list");

$(".list li").sort(function (a, b) {
    return window.parseInt($(a).text(), 10) - window.parseInt($(b).text(), 10);
}).remove().each(function () {
    $parent.append($(this));
});

【讨论】：

【解决方案9】：

一种方法可以是 li 元素的 sort an array（嗯，一个 jQuery 对象），并用排序的元素数组替换 ul 的内容（使用 html 方法）：

$(".list").html($(".list li").sort(function(a, b) {
     return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);    
}));

这是working example。

【讨论】：

谢谢，看起来不错，但是.. 不确定排序数组在这里是否正常工作？看起来它是按第一个数字而不是按实际值排序的。

【解决方案10】：

使用 jQuery 寻求帮助：

var sortFunction = function(a, b) {
    return (+($(b).text())) - (+($(a).text()));
}
var lis = $('ul.list li');
lis = Array.prototype.sort.call(lis, sortFunction);

for (var i = 0; i < lis.length; i++) {
    $('ul.list').append(lis[i]);
}

Fiddle Link

【讨论】：

【解决方案11】：

像往常一样对 jQuery 集合进行排序，然后以正确的顺序将每个元素附加回来。

$(".list li").sort(function(a, b) {
    return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);    
}).appendTo('.list');

http://jsfiddle.net/zMmWj/

【讨论】：