При сортировке div по нескольким атрибутам данных, как указать AS C / DES C?

Question

В этом вопросе - Как отсортировать div по 2 атрибутам данных? этот полезный ответ мне подходит. Однако мне нужно указать, является ли каждый атрибут AS C или DES C

Как мне изменить js, чтобы включить это, пожалуйста?

Я что-то думаю вот так:

divList.sort(multiSort(["status","ASC","order","DESC"]));

Но я не знаю, с чего начать, чтобы JS просматривал каждый второй элемент в массиве, а затем соответствующим образом изменял порядок сортировки.

$(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="4">4</div>
    <div class="sortme" data-status="2" data-order="2">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 1

Было бы более семантически (и проще кодировать) обернуть поля и направления в подмассивы, например:

divList.sort(multiSort([["status","ASC"],["order","DESC"]]));

Если это нормально, вы можете легко изменить свой код:

$(document.body).on('click', "#sortthem", function(){
    var divList = $(".sortme");
    divList.sort(multiSort([["status","ASC"],["order","DESC"]]));
    $("#mydivs").html(divList);
});
function multiSort(fields) {
    return function (a, b) {
        return fields
            .map(function ([o, d]) {
               return ($(a).data(o) > $(b).data(o) ?  1 :  $(a).data(o) < $(b).data(o) ? -1 : 0) * (d === 'ASC' ? 1 : d === 'DESC' ? -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="4">4</div>
    <div class="sortme" data-status="2" data-order="2">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>

Или версия ES5:

$(document.body).on('click', "#sortthem", function(){
    var divList = $(".sortme");
    divList.sort(multiSort([["status","ASC"],["order","DESC"]]));
    $("#mydivs").html(divList);
});
function multiSort(fields) {
    return function (a, b) {
        return fields
            .map(function (o) {
               return ($(a).data(o[0]) > $(b).data(o[0]) ?  1 :  $(a).data(o[0]) < $(b).data(o[0]) ? -1 : 0) * (o[1] === 'ASC' ? 1 : o[1] === 'DESC' ? -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="4">4</div>
    <div class="sortme" data-status="2" data-order="2">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>