jQuery: sort a list by two params

Question

I need to sort a list of divs by two values. In my example, the div with the shortest duration should be on top of the list. So far I got it working. BUT if I have two divs with the same duration, the sort function should have the one on top that has the shortest duration AND the lowest price.

How do I combine two of this sort functions?

The result should be:

Duration: 500 - Price: 190
Duration: 500 - Price: 250
Duration: 600 - Price: 100
Duration: 700 - Price: 130

var List__fastest = "";
List__fastest = $("div");
List__fastest.sort(function (a, b) { return $(a).data("duration") - $(b).data("duration") });

$("#result").html(List__fastest);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div data-duration="700" data-price="130">Duration: 700 - Price: 130</div>
<div data-duration="500" data-price="250">Duration: 500 - Price: 250</div>
<div data-duration="600" data-price="100">Duration: 600 - Price: 100</div>
<div data-duration="500" data-price="190">Duration: 500 - Price: 190</div>

<div id="result"></div>

List__fastest.sort(function (a, b) { return $(a).data("duration") - $(b).data("duration") || $(a).data("price") - $(b).data("price") }); — Pranav C Balan
– Pranav C Balan, Commented Mar 29, 2019 at 17:33

T.J. Crowder · Accepted Answer · 2019-03-29 17:36:25Z

1

Basically, if the result of comparing the first thing you want to sort on is that they aren't equal, return that result; otherwise, return the result of doing the comparison of the second thing you want to sort on. You can do that with JavaScript's curiously-powerful || operator:

setTimeout(function() {
  var List__fastest = "";
  List__fastest = $("div");
  List__fastest.sort(function (a, b) {
      return $(a).data("duration") - $(b).data("duration") // First by this
          || $(a).data("price") - $(b).data("price");      // Then by this
  });

  $("#result").html(List__fastest);
}, 800);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div data-duration="700" data-price="130">Duration: 700 - Price: 130</div>
<div data-duration="500" data-price="250">Duration: 500 - Price: 250</div>
<div data-duration="600" data-price="100">Duration: 600 - Price: 100</div>
<div data-duration="500" data-price="190">Duration: 500 - Price: 190</div>

<div id="result"></div>

Obviously, reverse the order of the comparisons if you want to sort by price first, and then duration. (Both ways end up with the lowest duration and lowest price as the first time.)

answered Mar 29, 2019 at 17:36

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

JonSnow Over a year ago

Perfect, that worked for me! Thank you for your help and the good explanation! <3

Collectives™ on Stack Overflow

jQuery: sort a list by two params

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related