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');

Answer 3

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);

Answer 4

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

Answer 5

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);
    }