前几天我问了一个关于根据附加的数据值对 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);
});
最佳答案
因此,您正在执行 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);
关于jquery - 在 JQuery 中还有比这更有效的元素排序方法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5551833/