How can I sort elements by numerical value of data attribute?

Question

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> 

Answer 1

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/

Answer 2

$('.testWrapper').find('.test').sort(function (a, b) {    return $(a).attr('data-percentage') - $(b).attr('data-percentage'); }) .appendTo('.testWrapper');