Question

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

每个li包含三个属性：attr-x，attr-y和attr-z。

我试图按照以下方式对ul进行排序：

top group是attr-x = true。底部组是attr-x = false。

对于两组中的每一组：按attr-y排序（最大数字到最小数字）。

之后， ONLY 如果有等于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>

首先排序（top-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>

第二种排序（对于每个子组，按数据-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>

第三种排序（如果数据-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>

这是我的小提琴： 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>

按多个值排序ul

1 个答案: