How to sort divs by 2 data attributes?

Question

How do I modify my code so that it sorts by both data-status and then data-order? ie the desired result is 1,2,3,4

I need to support IE.

 $(document.body).on('click', "#sortthem", function(){ var divList = $(".sortme"); divList.sort(function(a, b){ return $(a).data("status")-$(b).data("status") }); $("#mydivs").html(divList); });

 <div id="mydivs"> <div class="sortme" data-status="2" data-order="2">4</div> <div class="sortme" data-status="2" data-order="4">3</div> <div class="sortme" data-status="1" data-order="2">2</div> <div class="sortme" data-status="1" data-order="1">1</div> </div> <span class="btn btn-primary" id="sortthem" >Sort them</span> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

Answer 1

You can add any additional criteria in to the sort directly by checking if the fist criteria result == 0 - then check the second, etc

Updated snippet:

 $(document.body).on('click', "#sortthem", function(){ var divList = $(".sortme"); divList.sort(function(a, b){ var sort1 = $(a).data("status")-$(b).data("status"); if (sort1;== 0) return sort1. var sort2 = $(a).data("order")-$(b);data("order") return sort2; }). $("#mydivs");html(divList); });

 <div id="mydivs"> <div class="sortme" data-status="2" data-order="2">4</div> <div class="sortme" data-status="2" data-order="4">3</div> <div class="sortme" data-status="1" data-order="2">2</div> <div class="sortme" data-status="1" data-order="1">1</div> </div> <span class="btn btn-primary" id="sortthem" >Sort them</span> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

Answer 2

You can try this for multiple parameters

 $(document.body).on('click', "#sortthem", function(){ var divList = $(".sortme"); divList.sort(multiSort(["status","order"])); $("#mydivs").html(divList); }); function multiSort(fields) { return function (a, b) { return fields.map(function (o) { return $(a).data(o) > $(b).data(o)? 1: $(a).data(o) < $(b).data(o)? -1: 0; }).reduce(function firstNonZeroValue (el,n) { return el? el: n }, 0); }; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div id="mydivs"> <div class="sortme" data-status="2" data-order="2">4</div> <div class="sortme" data-status="2" data-order="4">3</div> <div class="sortme" data-status="1" data-order="2">2</div> <div class="sortme" data-status="1" data-order="1">1</div> </div> <span class="btn btn-primary" id="sortthem" >Sort them</span>

Answer 3

To sort by multiple attributes you simply need to put the secondary sorting logic in place where the two primary attributes match. This can be done in a ternary, as in the following example.

Also note that given your HTML the output will be 1,2,4,3 as the order of the 4 element is lower than that of the 3 .

 $(document.body).on('click', "#sortthem", function() { $(".sortme").sort(function(a, b) { let $a = $(a), $b = $(b); let aStatus = $a.data('status'), bStatus = $b.data('status'); let aOrder = $a.data('order'), bOrder = $b.data('order'); return aStatus < bStatus? -1: aStatus > bStatus? 1: aOrder < bOrder? -1: aOrder > bOrder? 1: 0; }).appendTo('#mydivs'); });

 <div id="mydivs"> <div class="sortme" data-status="2" data-order="2">4</div> <div class="sortme" data-status="2" data-order="4">3</div> <div class="sortme" data-status="1" data-order="2">2</div> <div class="sortme" data-status="1" data-order="1">1</div> </div> <span class="btn btn-primary" id="sortthem">Sort them</span> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />