javascript - 按多个值对 ul 进行排序

Question

我有一个带有 li-s 的 ul 列表..

每个li包含三个属性:attr-x、at​​tr-y和attr-z。

我正在尝试根据以下内容对 ul 进行排序:

顶级组是 attr-x=true。 底部组是 attr-x=false。

对于两组中的每一组: 按 attr-y(最大数字到最小数字)排序。

之后，只有如果有元素具有相同的 attr-y，按 attr-z 排序。

例子:

<div class="test" data-x="false" data-y="7" data-z="20">a</div>
<div class="test" data-x="true" data-y="3" data-z="25">b</div>
<div class="test" data-x="false" data-y="7" data-z="25">c</div>
<div class="test" data-x="true" data-y="5" data-z="20">d</div>

首先排序(data-x=true 在顶部，data-x=false 在底部):

<div class="test" data-x="true" data-y="3" data-z="25">b</div>
<div class="test" data-x="true" data-y="5" data-z="20">d</div>
<div class="test" data-x="false" data-y="7" data-z="20">a</div>
<div class="test" data-x="false" data-y="7" data-z="25">c</div>

第二次排序(对于每个子组，按 data-y 排序):

<div class="test" data-x="true" data-y="5" data-z="20">d</div>
<div class="test" data-x="true" data-y="3" data-z="25">b</div>
<div class="test" data-x="false" data-y="7" data-z="20">a</div>
<div class="test" data-x="false" data-y="7" data-z="25">c</div>

第三种排序(如果子组中data-y相等，按data-z排序):

<div class="test" data-x="true" data-y="5" data-z="20">d</div>
<div class="test" data-x="true" data-y="3" data-z="25">b</div>
<div class="test" data-x="false" data-y="7" data-z="25">c</div>
<div class="test" data-x="false" data-y="7" data-z="20">a</div>

这是我的 fiddle : http://jsfiddle.net/5uq2qrte/

感谢任何帮助!

Answer 1

您可以像这样使用sort()。

var sorted = $('.testWrapper div').sort(function(a, b) {
  return ($(b).data('x') - $(a).data('x')) || ($(b).data('y') - $(a).data('y')) || ($(b).data('z') - $(a).data('z'))
})

$(".testWrapper").html(sorted)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testWrapper">
  <div class="test" data-x="false" data-y="7" data-z="20">a</div>
  <div class="test" data-x="true" data-y="3" data-z="25">b</div>
  <div class="test" data-x="false" data-y="7" data-z="25">c</div>
  <div class="test" data-x="true" data-y="5" data-z="20">d</div>
</div>