When Sorting Divs By Multiple Data Attributes How To Specify Asc / Desc?

In this question - How to sort divs by 2 data attributes? this helpful answer is working well for me. However I need to be able to specify whether each attribute is ASC or DESC How

Solution 1:

It would be more semantical (and easier to code) to wrap the fields and directions into subarrays, like:

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

If this is OK, then you could easily modify your code:

$(document.body).on('click', "#sortthem", function(){
    var divList = $(".sortme");
    divList.sort(multiSort([["status","ASC"],["order","DESC"]]));
    $("#mydivs").html(divList);
});
functionmultiSort(fields) {
    returnfunction (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(functionfirstNonZeroValue (el,n) { return el ? el : n }, 0);
    };
}

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

Or, an ES5 version:

$(document.body).on('click', "#sortthem", function(){
    var divList = $(".sortme");
    divList.sort(multiSort([["status","ASC"],["order","DESC"]]));
    $("#mydivs").html(divList);
});
functionmultiSort(fields) {
    returnfunction (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(functionfirstNonZeroValue (el,n) { return el ? el : n }, 0);
    };
}

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