按字母数字对一组 li 标签进行排序

Question

我一直在尝试获得一个功能，该功能将按内容对 li 标签的选择进行排序，但目前无济于事（至少没有速度/准确性）；

$('.sortasc').live('click',function(){

        var liArr = Array();

        $('#licontainer').children('li').each(function(){
           liArr.push($(this).html());
        });

        liArr.sort(alphaNumSort);

        $(liArr).each(function(){
            var current = this;

            var clone = $('li').filter(function(){return($(this).html()==current);}).clone();

            $('li').filter(function(){return($(this).html()==current);}).remove();

            clone.appendTo('#tempsortbox');

        });

        $('#licontainer').html($('#tempsortbox').html());
        $('#tempsortbox').html('')

    });

排序既慢又不好。理想情况下，它会根据 li 中的强标签的内容进行排序。

如果您有兴趣，这里是 alphaNumSort 函数（这可以解决它只是蹩脚的 html 和克隆垃圾，它并没有真正起作用）

function alphaNumSort(m,n){
try{
    var cnt= 0,tem;
    var a= m.toLowerCase();
    var b= n.toLowerCase();
    if(a== b) return 0;
    var x=/^(\.)?\d/;

    var L= Math.min(a.length,b.length)+ 1;
    while(cnt< L && a.charAt(cnt)=== b.charAt(cnt) &&
    x.test(b.substring(cnt))== false && x.test(a.substring(cnt))== false) cnt++;
    a= a.substring(cnt);
    b= b.substring(cnt);

    if(x.test(a) || x.test(b)){
        if(x.test(a)== false)return (a)? 1: -1;
        else if(x.test(b)== false)return (b)? -1: 1;
        else{
            var tem= parseFloat(a)-parseFloat(b);
            if(tem!= 0) return tem;
            else tem= a.search(/[^\.\d]/);
            if(tem== -1) tem= b.search(/[^\.\d]/);
            a= a.substring(tem);
            b= b.substring(tem);
        }
    }
    if(a== b) return 0;
    else return (a >b)? 1: -1;
}
catch(er){
    return 0;
}

}

干杯

Answer 1

我不完全确定您的 alphaNumSort 函数是做什么的，但简单的字符串比较可能就足够了。

var li = $('#licontainer li').get();

// sort the list items based on the contents of a nested strong tag
li.sort(function(a, b) {
    a = $('strong', a).text();
    b = $('strong', b).text();

    // you may want to process the text values further here, perhaps
    // running it through $.trim, reducing whitespace sequences with
    // a regular expression, or lower- or upper-casing letters to
    // make the comparison case-insensitive.

    return (a < b) ? -1 : ((a > b) ? 1 : 0);
});

// reinsert the list items in their new order
$('#licontainer').append(li);

这应该比您的临时列表方法快得多，因为它执行的 DOM 操作更少。使用本机字符串比较也应该比您当前的排序算法快一点，但如果它正在做一些我错过的特定操作，请更新 return 语句以使用它（保留前面的行）。

return alphaNumSort(a, b);

如果这仍然太慢，您可以通过在操作列表之前隐藏列表来进一步提高性能，防止浏览器执行不必要的重绘。

var li = $('#licontainer').hide().find('li').get();

// ...

$('#licontainer').append(li).show();

Answer 2

如果你想用javascript对其进行排序，你需要a method/function to sort它。并且您需要选择何时对其进行排序：加载、单击按钮等...

另一种可能性是在发送 html 之前进行排序：这取决于您的服务器语言。 php、java、asp等...？但是您可以使用the same link 来找到最适合您需求的算法。

Answer 3

var sortList = function () {
    var ul = document.getElementsByTagName("ul"),
    ol = document.getElementsByTagName("ol"),
    sort = function (x) {
        var a, li;
        for (a = 0; a < x.length; a += 1) {
            li = x[a].getElementsByTagName("li");
            li = li.sort();
            x[a].innerHTML = li.join("");
        }
    };
    sort(ul);
    sort(ol);
};