Как отсортировать div по 2 атрибутам данных?

Question

Как мне изменить мой код, чтобы он сортировался как по статусу данных, так и по порядку данных? ie желаемый результат 1,2,3,4

Мне нужно поддерживать 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

Вы можете добавить любые дополнительные критерии в сортировку напрямую, проверив, равен ли результат первого критерия == 0, а затем проверьте второй, et c

Обновленный фрагмент:

$(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

Вы можете попробовать это для нескольких параметров

$(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

Для сортировки по нескольким атрибутам вам просто нужно поместить вторичный лог-код сортировки c на место, где совпадают два основных атрибута. Это можно сделать троично, как в следующем примере.

Также обратите внимание, что с учетом вашего HTML вывод будет 1,2,4,3, поскольку order элемента 4 ниже, чем это из 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" />