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

});

user_2181514 · Answer

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

});

user_2576254 · Answer

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




    4
    3
    2
    1

Sort them

user_519413 · Answer

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


  4
  3
  2
  1

Sort them

How to sort divs by 2 data attributes?

3 Answers