Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery sort elements using data id

I have an HTML structure as follows:

<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-sid attributes it no longer works.

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

Not working?

like image 902
user1834809 Avatar asked Nov 21 '12 09:11

user1834809


3 Answers

You can use dataset property 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 parseInt or + operator.

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

http://jsfiddle.net/CFYnE/

And your own code also work: http://jsfiddle.net/f5mC9/

Edit: Please note that IE10! and below do not support the .dataset property, if you want to support all browsers you can use jQuery's .data() method instead:

$('.clist div').sort(function(a,b) {
     return $(a).data('sid') > $(b).data('sid');
}).appendTo('.clist');
like image 71
undefined Avatar answered Nov 03 '22 13:11

undefined


$('.clist div').sort(function(a,b) {
     return parseInt(a.dataset.sid) - parseInt(b.dataset.sid);
}).appendTo('.clist');
like image 14
devside Avatar answered Nov 03 '22 13:11

devside


A more generic function to sort elements using 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);
like image 6
tocqueville Avatar answered Nov 03 '22 15:11

tocqueville