jQuery 使用数据 id 对元素进行排序

我的 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>

我想将它们排序为：

<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>

我正在使用以下功能：

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);
}

它没有按预期工作。

它在第一次运行时运行良好，但在添加新元素或更改后data-sid属性它不再起作用。

Demo: http://jsfiddle.net/f5mC9/1/ http://jsfiddle.net/f5mC9/1/

不工作？

您可以使用dataset存储所有自定义的属性data-*元素的属性，它返回一个字符串，如果您想将字符串转换为数字，您可以使用parseInt or +操作员。

$('.clist div').sort(function(a,b) {
     return a.dataset.sid > b.dataset.sid;
}).appendTo('.clist');

http://jsfiddle.net/CFYnE/ http://jsfiddle.net/CFYnE/

你自己的代码也可以工作：http://jsfiddle.net/f5mC9/ http://jsfiddle.net/f5mC9/

编辑：请注意IE10！及以下不支持.dataset属性，如果你想支持所有浏览器，你可以使用 jQuery 的.data()方法改为：

$('.clist div').sort(function(a,b) {
     return $(a).data('sid') > $(b).data('sid');
}).appendTo('.clist');