Question

我前几天问了一个关于在JQuery中根据附加的数据值对元素进行排序的问题。下面的解决方案有效，但提出了另一个关于使用的本机排序方法和效率的问题。

有人能推荐一种更有效的方式来解决这个问题吗？

$(function() {
    var myArray = $('li').get();  

    myArray.sort(function(x,y) {
        return $(x).data('color') > $(y).data('color') ? 1 : -1;
    });

    $('ul').empty().append(myArray);
});

Answer 1

所以你正在执行一个jQuery选择...然后获取DOM元素的底层数组...然后进行排序中的每个比较，你就是a）创建一个新的jQuery两个底层DOM元素中的每一个的元素，以及b）从它们获取数据属性。

这看起来似乎不太快。我建议改为：

1）为DOM元素创建颜色映射：

var lis = document.getElementsByTagName("li");

var keys = [];
var map = {};
for (var i = 0, li; li = lis[i]; i) {
    var color = $(li).data("color");
    keys.push(color);
    map[color] = li;
}

2）对keys数组进行排序：

keys.sort();

3）创建要插入的DOM元素数组：

var lisInOrder = [];
for (var j = 0, key; key = keys[j]; ++j) {
    var liFromKey = keys[key];
    lisInOrder.push(liFromKey);
}

4）插入它们：

$('ul').empty().append(lis);

Answer 2

据我所知，.sort（）方法的实现并没有在不同的实现中实现标准化，但是大多数都会使用QuickSort，这对于大多数情况来说非常快。但是，如果您有一定数量的颜色和大量要排序的数据，则会有更快的算法（例如，heapsort O（n * m）vs quicksort O（n * logn））。另一方面，您必须在javascript中实现您的算法，但本机.sort（）方法很可能是在环境的本机代码中实现的。所以最后我会坚持使用原生的.sort（）。

PS：如果元素相等，则比较函数应返回0。你的返回只有1和-1，这可能会影响结果和性能。

有没有一种更有效的方法来排序JQuery中的元素呢？

2 个答案: