Javascript jQuery 使用数据 id 对元素进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13490391/
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
jQuery sort elements using data id
提问by user1834809
I have an HTML structure as follows:
我有一个 HTML 结构如下：
<div class="clist">
<div data-sid=1></div>
<div data-sid=2></div>
<div data-sid=2></div>
<div data-sid=1></div>
<div data-sid=2></div>
<div data-sid=2></div>
<div data-sid=1></div>
</div>
I would like to sort them as:
我想将它们排序为：
<div class="clist">
<div data-sid=1></div>
<div data-sid=1></div>
<div data-sid=1></div>
<div data-sid=2></div>
<div data-sid=2></div>
<div data-sid=2></div>
<div data-sid=2></div>
</div>
I am using the following function:
我正在使用以下功能：
function sortContacts() {
var contacts = $('div.clist'), cont = contacts.children('div');
cont.detach().sort(function(a, b) {
var astts = $(a).data('sid');
var bstts = $(b).data('sid')
return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
});
contacts.append(cont);
}
It is not working as expected.
它没有按预期工作。
It is working well for the first run but after adding new element or changing the data-sidattributes it no longer works.
它在第一次运行时运行良好，但在添加新元素或更改data-sid属性后，它不再起作用。
Demo: http://jsfiddle.net/f5mC9/1/
演示：http: //jsfiddle.net/f5mC9/1/
Not working?
不工作？
回答by undefined
You can use datasetproperty which stores all of the custom data-*attributes of an element, it returns a string, in case that you want to convert the string to a number you can use parseIntor +operator.
您可以使用dataset存储data-*元素的所有自定义属性的属性，它返回一个字符串，以防您想将字符串转换为您可以使用的数字parseInt或+运算符。
$('.clist div').sort(function(a,b) {
return a.dataset.sid > b.dataset.sid;
}).appendTo('.clist');
And yes, your code works here, http://jsfiddle.net/f5mC9/
是的，你的代码在这里工作，http://jsfiddle.net/f5mC9/
Edit: Please note that IE10! and below do not support the .datasetproperty, if you want to support all browsers you can use jQuery's .data()method instead:
编辑：请注意IE10！及以下不支持该.dataset属性，如果你想支持所有浏览器你可以使用jQuery的.data()方法代替：
$('.clist div').sort(function(a,b) {
return $(a).data('sid') > $(b).data('sid');
}).appendTo('.clist');
回答by devside
$('.clist div').sort(function(a,b) {
return a.dataset.sid > b.dataset.sid ? 1 : -1; //be carefull, string comparaison
}).appendTo('.clist');
or maybe
或者可能
$('.clist div').sort(function(a,b) {
return parseInt(a.dataset.sid) - parseInt(b.dataset.sid);
}).appendTo('.clist');
sort() handles negative/positive returns;
sort() 处理负/正回报；
回答by tocqueville
A more generic function to sort elements using jQuery:
使用 jQuery 对元素进行排序的更通用的函数：
$.fn.sortChildren = function (sortingFunction: any) {
return this.each(function () {
const children = $(this).children().get();
children.sort(sortingFunction);
$(this).append(children);
});
};
Usage:
用法：
$(".clist").sortChildren((a, b) => a.dataset.sid > b.dataset.sid ? 1 : -1);
