jQuery使用数据id排序元素

Question

(对不起,如果问题已经存在)

我是jQuery开发的新手.

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

但它没有按预期工作..

它第一次运行良好,但是当添加新元素或更改数据时,它无法正常工作.

编辑:

演示

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

不工作？

Answer 1

您可以使用dataset存储data-*元素的所有自定义属性的属性,它返回一个字符串,以防您想要将字符串转换为您可以使用的数字parseInt或+运算符.

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

http://jsfiddle.net/CFYnE/

是的,你的代码在这里工作,http://jsfiddle.net/f5mC9/

编辑:请注意IE10!以下不支持该.dataset属性,如果你想支持所有浏览器,你可以使用jQuery的.data()方法:

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

Answer 2

$('.clist div').sort(function(a,b) {
     return a.dataset.sid > b.dataset.sid ? 1 : -1; //be carefull, string comparaison
}).appendTo('.clist');

或者可能

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

sort()处理负/正回报;

Answer 3

使用jQuery对元素进行排序的更通用的函数:

$.fn.sortChildren = function (sortingFunction: any) {

    return this.each(function () {
        const children = $(this).children().get();
        children.sort(sortingFunction);
        $(this).append(children);
    });

};

用法:

$(".clist").sortChildren((a, b) => a.dataset.sid > b.dataset.sid ? 1 : -1);