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>

Do you have a wrapping div around those divs? – sp00m Jan 04 '13 at 16:03 — sp00m, Jan 04 '13 at 16:03
Yes, there is - I've updated the question to reflect. – JayDee Jan 04 '13 at 16:04 — JayDee, Jan 04 '13 at 16:04

Joseph Silber · Accepted Answer · 2015-11-16T22:46:59.583

140

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/

edited Nov 16 '15 at 22:46

answered Jan 04 '13 at 16:04

Joseph Silber

214,931
59
362
292

2

You don't *need* the unary plus here, since `-` will convert both operands to numbers. It makes things clearer though. – Felix Kling Jan 21 '13 at 12:23
7

@FelixKling - I hate implicit casting. If I'm doing math, I like to be dealing with numbers directly. – Joseph Silber Jan 21 '13 at 14:13
jQuery.data is your friend – lukeocodes Jun 18 '15 at 13:15
1

@LukeOliff - Sometimes. In this case it's not needed, so I don't want its overhead. – Joseph Silber Jun 18 '15 at 19:42
1

@JosephSilber well done, work greate! I have one question if div don't have 'data-percentage' I want to go last place, is this possible ? Thanks. – diank Apr 15 '16 at 11:33
@diank - `return (+a.dataset.percentage || 100) - (+b.dataset.percentage || 100)` – Joseph Silber Apr 15 '16 at 13:41
`find` is a jQuery specific method ?? – oldboy Jan 11 '20 at 20:17
@oldboy - it is. Nowadays you can use the native `querySelectorAll` method, which is mostly similar to jQuery's `find` method. – Joseph Silber Jan 15 '20 at 01:42

score 11 · Answer 2 · answered Jul 16 '14 at 09:30

11

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

answered Jul 16 '14 at 09:30

Jeaf Gilbert

11,495
19
78
105

Gilber I have one question if div don't have 'data-percentage' I want to go last place, is this possible ? Thanks. – diank Apr 15 '16 at 11:34

score 5 · Answer 3 · answered Jan 15 '19 at 00:11

5

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

answered Jan 15 '19 at 00:11

thebronsonite

129
2
12

explanation is that if you set data value like me `.data('percentage',5)` then https://stackoverflow.com/questions/23538335/jquery-data-attr-not-setting it's being set internally thus nor dataset.percentage nor .getAttribute('data-percentage') work – Hebe Jul 04 '21 at 18:17

score 1 · Answer 4 · answered Jan 04 '13 at 16:21

1

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

answered Jan 04 '13 at 16:21

FedIz

46
4

2

There's no need for that first empty-string-argument. Just pass it the object as its sole argument. – Joseph Silber Jan 04 '13 at 16:24

score 0 · Answer 5 · answered Dec 14 '17 at 17:08

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

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

5 Answers5

Linked

Related