jQuery sort elements using data id
Solution 1
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');
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');
Solution 2
$('.clist div').sort(function(a,b) {
return parseInt(a.dataset.sid) - parseInt(b.dataset.sid);
}).appendTo('.clist');
Solution 3
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);
Related videos on Youtube
user1834809
Updated on December 24, 2021Comments
-
user1834809 over 2 years
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?
-
user1834809 over 11 yearsi would like to swap elements
-
Admin over 11 yearsyou could use tinysort (tinysort.sjeiti.com)
-
-
MissRaphie over 10 yearsWorks like a charm! Thanks!
-
Chris almost 9 yearsNote that using
.data()
to access HTML data attributes creates a copy of the data attribute when it is first accessed. If you change the data attribute's value later on,data()
will still return the old value. -
jkupczak over 8 yearsI'm not getting
.data()
to work in IE11 or Edge. :( jsfiddle.net/4o771n7o -
Travis J over 8 years@jimmykup -
.data()
works just fine in IE11 and Edge. It is the comparison which is different. -
Aaron about 7 yearsI ran into problems when sorting a list of more than 10 by a string value. I had to change the comparison to: return a.dataset.sid > b.dataset.sid ? 1 : (a.dataset.sid < b.dataset.sid ? -1 : 0);
-
trincot about 7 yearsThe attributes are retrieved as a string values. The way to sort them as numbers:
return +a.dataset.sid - +b.dataset.sid;
-
Ram about 7 years@trincot That's a good point. It should be noted that jQuery
.data()
tries to parse thedata-*
attributes as JSON, so stringified numbers are coerced into real numbers by jQuery. -
Koray over 5 years@Aaron that definitely solved the problems I've faced. But I could not understand why. Can you explain how your code solved that?