如何按2个数据属性对div进行排序? [英] How to sort divs by 2 data attributes?
本文介绍了如何按2个数据属性对div进行排序?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何修改代码,使其按数据状态和数据顺序排序?即期望的结果是1,2,3,4
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
我需要支持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"/>
推荐答案
您可以通过检查第一个条件的结果是否== 0-然后检查第二个,等等直接将任何其他条件添加到排序中.
You can add any additional criteria in to the sort directly by checking if the fist criteria result == 0 - then check the second, etc
更新的代码段:
$(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"/>
这篇关于如何按2个数据属性对div进行排序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文