jQuery sort order by data attribute

Question

I have some items in a div that are have the data attribute of data-order attached to them:

<div class="list">
   <a href="#" data-order="4">Thing 4</a>
   <a href="#" data-order="3">Thing 3</a>
   <a href="#" data-order="1">Thing 1</a>
   <a href="#" data-order="2">Thing 2</a>
</div>

But I'm trying to get them so they display the numerical order (ascending - 1,2,3, etc.):

<div class="list">
   <a href="#" data-order="1">Thing 1</a>
   <a href="#" data-order="2">Thing 2</a>
   <a href="#" data-order="3">Thing 3</a>
   <a href="#" data-order="4">Thing 4</a>
</div>

I have this:

  $(".list a").sort(function(a, b) {
    return $(a).attr("data-order") > $(b).attr("data-order");
  }).each(function() {
    $(".list").prepend(this);
  });

But that seems to really mess the order up. So I'm not too sure what I'm doing incorrectly or if there might be a simpler way to go about getting them to sort correctly.

Whoops! That might be a typo.... I was looking at another example that as using date to sort. — ultraloveninja
– ultraloveninja, Commented Dec 3, 2018 at 19:17
@GeorgeJempty Your html is already in order. If you mix them up, it does not work. — Tyler Roper
– Tyler Roper, Commented Dec 3, 2018 at 19:26

Tyler Roper · Accepted Answer · 2018-12-03 20:35:15Z

15

A few things:

sort should not return a boolean, but rather a negative, positive, or zero^*:

if (a  <  b) return -1; //negative
if (a  >  b) return 1;  //positive
if (a === b) return 0;  //0

Easier expressed as:

return a - b;

You can use appendTo() in place of .each( .append() ), which I'd expect to perform slightly better.
.attr("data-order") can be expressed as .data("order") (though this is more a matter of preference).

$(".list a")
    .sort((a,b) => $(a).data("order") - $(b).data("order"))
    .appendTo(".list");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <a href="#" data-order="4">Thing 4</a>
  <a href="#" data-order="3">Thing 3</a>
  <a href="#" data-order="1">Thing 1</a>
  <a href="#" data-order="2">Thing 2</a>
</div>

Taking it one step further, you could even create your own jQuery plugin/method:

$(".list").sortChildren();

$.fn.sortChildren = function() {
    this
      .children()
      .sort((a,b) => $(a).data("order") - $(b).data("order") || -1)
      .appendTo(this);

    return this;
}

$(".list").sortChildren();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <a href="#" data-order="4">Thing 4</a>
  <a href="#" data-order="3">Thing 3</a>
  <a href="#" data-order="1">Thing 1</a>
  <a href="#" data-order="2">Thing 2</a>
</div>

*Thanks to charlieftl for the slight correction.

With his note that the sort() doesn't have to return -1, 0, or 1, we gain a few things:

We can simply do a - b to determine sort order
We no longer need to parse the values. The - operator can only be used with numeric values, therefore it will parse a and b on its own.

edited Dec 3, 2018 at 20:35

answered Dec 3, 2018 at 19:29

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

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

2 Comments

charlietfl Over a year ago

" It should return one of three values" is not absolute. Rule is really ... positive number, negative number or zero

ultraloveninja Over a year ago

Cool, this makes sense of things. Thanks!

charlietfl · Accepted Answer · 2018-12-03 20:16:26Z

1

Change your sort comparison operator to - from > which will cast the values to numbers and the subtraction will return numeric value that is positive, negative or zero

Can also use html(function) or append(function)

$(".list").append(function() {
  return $(this).children().sort(function(a, b) {
    return $(a).attr("data-order") - $(b).attr("data-order");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <a href="#" data-order="4">Thing 4</a>
  <a href="#" data-order="3">Thing 3</a>
  <a href="#" data-order="1">Thing 1</a>
  <a href="#" data-order="2">Thing 2</a>
</div>

edited Dec 3, 2018 at 20:16

answered Dec 3, 2018 at 20:02

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

jQuery sort order by data attribute

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related