按字母数字排序一组li标签

时间:2009-09-29 10:14:33

标签: javascript jquery arrays sorting

我一直在试图获得一个功能,它会根据内容对选择的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;
}

}

干杯

3 个答案:

答案 0 :(得分:11)

我不完全确定你的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();

答案 1 :(得分:0)

如果您想使用javascript对其进行排序,则需要a method/function to sort它。您需要选择何时进行排序:加载,单击按钮等...

另一种可能性是在发送html之前进行排序:它取决于您的服务器语言。 Php,java,asp等......?但您可以使用the same link找到满足您需求的最佳算法。

答案 2 :(得分:0)

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