How can I sort elements by numerical value of data attribute?
JavascriptHtmlJqueryJavascript Problem Overview
I have multiple elements with the attribute: data-percentage
, is there a way of sorting the elements into ascending order with the lowest value first using either JavaScript or jQuery?
HTML:
<div class="testWrapper">
<div class="test" data-percentage="30">
<div class="test" data-percentage="62">
<div class="test" data-percentage="11">
<div class="test" data-percentage="43">
</div>
Desired result:
<div class="testWrapper">
<div class="test" data-percentage="11">
<div class="test" data-percentage="30">
<div class="test" data-percentage="43">
<div class="test" data-percentage="62">
</div>
Javascript Solutions
Solution 1 - Javascript
Use Array.sort
:
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +a.dataset.percentage - +b.dataset.percentage;
})
.appendTo($wrapper);
Here's the fiddle: http://jsfiddle.net/UdvDD/
If you're using IE < 10, you can't use the dataset
property. Use getAttribute
instead:
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +a.getAttribute('data-percentage') - +b.getAttribute('data-percentage');
})
.appendTo($wrapper);
Here's the fiddle: http://jsfiddle.net/UdvDD/1/
Solution 2 - Javascript
$('.testWrapper').find('.test').sort(function (a, b) {
return $(a).attr('data-percentage') - $(b).attr('data-percentage');
})
.appendTo('.testWrapper');
Solution 3 - Javascript
For some reason, on Firefox 64.0.2, none of the answers worked for me. This is what worked in the end, a mixture of Joseph Silber and Jeaf Gilbert's answers:
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +$(a).data('percentage') - +$(b).data('percentage');
})
.appendTo($wrapper);
Solution 4 - Javascript
I think that the Tinysort Jquery plugin should be an option, you can get it i here: http://tinysort.sjeiti.com/
I did not tried it but the code should look like this:
$("#test > div").tsort("",{attr:"data-percentage"});
hope this will help
Solution 5 - Javascript
A more robust option, this function can allow you to sort elements based on multiple options.
https://jsfiddle.net/L3rv3y7a/1/
// This calls the function
DOYPSort('#wrapper', '.element', value, order);
// Parameters must be strings
// Order of must be either 'H' (Highest) or 'L' (Lowest)
function DOYPSort(wrapper, elementtosort, AttrToSort, orderof) {
$(wrapper).find(elementtosort).sort(function (a, b) {
if (orderof === 'H') {
return +b.getAttribute(AttrToSort) - +a.getAttribute(AttrToSort);
}
if (orderof === 'L') {
return +a.getAttribute(AttrToSort) - +b.getAttribute(AttrToSort);
}
}).appendTo(wrapper);
}