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
– sp00m

2013-01-04 16:03:22 +00:00
Commented Jan 4, 2013 at 16:03 — sp00m
– sp00m, Commented Jan 4, 2013 at 16:03
Yes, there is - I've updated the question to reflect.

JayDee
– JayDee

2013-01-04 16:04:54 +00:00
Commented Jan 4, 2013 at 16:04 — JayDee
– JayDee, Commented Jan 4, 2013 at 16:04

Joseph Silber · Accepted Answer · 2015-11-16 22:46:59Z

141

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, 2015 at 22:46

answered Jan 4, 2013 at 16:04

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Felix Kling Over a year ago

You don't need the unary plus here, since - will convert both operands to numbers. It makes things clearer though.

Joseph Silber Over a year ago

@FelixKling - I hate implicit casting. If I'm doing math, I like to be dealing with numbers directly.

lukeocodes Over a year ago

jQuery.data is your friend

Joseph Silber Over a year ago

@LukeOliff - Sometimes. In this case it's not needed, so I don't want its overhead.

diank Over a year ago

@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.

|

Jeaf Gilbert · Accepted Answer · 2014-07-16 09:30:53Z

12

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

answered Jul 16, 2014 at 9:30

Jeaf Gilbert

12k19 gold badges84 silver badges109 bronze badges

1 Comment

diank Over a year ago

Gilber I have one question if div don't have 'data-percentage' I want to go last place, is this possible ? Thanks.

thebronsonite · Accepted Answer · 2019-01-15 00:11:45Z

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, 2019 at 0:11

thebronsonite

1292 silver badges12 bronze badges

1 Comment

Hube Over a year ago

explanation is that if you set data value like me .data('percentage',5) then stackoverflow.com/questions/23538335/… it's being set internally thus nor dataset.percentage nor .getAttribute('data-percentage') work

FedIz · Accepted Answer · 2013-01-04 16:21:41Z

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 4, 2013 at 16:21

FedIz

464 bronze badges

1 Comment

Joseph Silber Over a year ago

There's no need for that first empty-string-argument. Just pass it the object as its sole argument.

Benjamin James Kippax · Accepted Answer · 2017-12-14 17:08:47Z

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

Collectives™ on Stack Overflow

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

5 Answers 5

8 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related