如何按2个数据属性对div进行排序?

本文介绍了如何按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="cdnjs.cloudflare/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="maxcdn.bootstrapcdn/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="cdnjs.cloudflare/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="maxcdn.bootstrapcdn/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>