javascript 如何根据自定义属性对动态创建的元素进行排序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6076820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to order dynamically created elements based on a custom attribute?
提问by TaylorMac
This function seems to work fairly well for sorting divs based on ID:
这个函数对于基于 ID 对 div 进行排序似乎工作得很好：
JS
JS
var div = $("<div id='3.5'>AA</div>");
div_id_after = Math.floor(parseFloat(div.get(0).id));
$('#'+div_id_after).after(div);
HTML
HTML
<div id='1'>a</div>
<div id='2'>b</div>
<div id='3'>c</div>
<div id='4'>d</div>
<div id='5'>e</div>
Produces:
产生：
a
b
c
AA
d
e
一个
b
Ç
AA
d
È
But what if I would like to use a custom attribute titled "order"?
但是如果我想使用一个名为“order”的自定义属性呢？
The ID should not be a number for compatibility issues, but does this same rule apply to custom attributes?
出于兼容性问题，ID 不应是数字，但此相同规则是否适用于自定义属性？
回答by Jesse
If you're trying to sort on a custom data attribute, here's what I've done in the past:
如果您尝试对自定义数据属性进行排序，这就是我过去所做的：
html:
html：
<ul class="sortList">
<li data-sort="1">I am number one</li>
<li data-sort="7">I am number seven</li>
<li data-sort="22">I am number twenty two</li>
<li data-sort="2">I am number two</li>
</ul>
Because the list isn't in order and it's not sequential, the easiest way to do the sort is to use javascript's sort method on a jQuery selected array:
因为列表不是按顺序排列的，所以最简单的排序方法是在 jQuery 选择的数组上使用 javascript 的 sort 方法：
javascript:
javascript:
var list = $('.sortList');
var listItems = list.find('li').sort(function(a,b){ return $(a).attr('data-sort') - $(b).attr('data-sort'); });
list.find('li').remove();
list.append(listItems);
Because jQuery returns an array of elements, the native sort method will give you a sorted array of selectors that you can just replace the contents of the list with.
因为 jQuery 返回一个元素数组，所以原生 sort 方法会给你一个排序的选择器数组，你可以用它替换列表的内容。
After the sort, your list will look like this:
排序后，您的列表将如下所示：
<ul class="sortList">
<li data-sort="1">I am number one</li>
<li data-sort="2">I am number two</li>
<li data-sort="7">I am number seven</li>
<li data-sort="22">I am number twenty two</li>
</ul>
One thing to note as well: I use data-sort as the attribute, because attributes that start with "data-" are treated differently by browsers, so this won't cause validation issues.
还有一点需要注意：我使用 data-sort 作为属性，因为浏览器对以“data-”开头的属性的处理方式不同，因此这不会导致验证问题。
/////// EDIT:
/////// 编辑：
Given your comment, here's another way to do it without replacing the entire array. This will almost certainly be slower and require refining, I would still recommend using the above solution, but if you wanted to append without modifying the list:
鉴于您的评论，这是另一种无需替换整个数组的方法。这几乎肯定会更慢并且需要改进，我仍然建议使用上述解决方案，但如果您想在不修改列表的情况下追加：
//// This would happen inside a function somewhere
var list = $('ul li');
var newItem = $('<li data-sort="7"></li>'); // I assume you will be getting this from somewhere
$.each(list,function(index,item){
var prev = parseFloat($(item).attr('data-sort'));
var next = parseFloat($(list[index+1]).attr('data-sort'));
var current = parseFloat(newItem.attr('data-sort'));
if(prev <= current && (next > current || isNaN(next)) ){
$(item).after(newItem);
} else if(current > prev){
$(item).before(newItem);
}
});
回答by Mike
It looks like TinySortwill do what you want.
看起来TinySort会做你想做的。
$("ul").tsort({attr:"order"});
Also of interest after a quick google search is another SO Question.
在快速谷歌搜索后也感兴趣的是另一个SO Question。
