当按多个数据属性对div进行排序时，如何指定ASC/DESC

Question

在这个问题中-如何根据2个数据属性对div进行排序？这个有用的答案对我来说很有效。但是我需要能够指定每个属性是ASC还是DESC

我该如何修改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>