jquery - 在 JQuery 中还有比这更有效的元素排序方法吗？

Question

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

谁能推荐一种更有效的方法来解决这个问题？

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