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?
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');
$('.clist div').sort(function(a,b) {
return parseInt(a.dataset.sid) - parseInt(b.dataset.sid);
}).appendTo('.clist');
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With