按多个值对ul进行排序 [英] Sort ul by multiple values

问题描述

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

每个li包含三个属性:attr-x，attr-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>

第一种(数据x =顶部为true，数据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>

第三种排序方式(如果子组中的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>

这是我的小提琴: http://jsfiddle.net/5uq2qrte/

任何帮助表示赞赏！

解决方案

您可以像这样使用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> 

I have a ul list with li-s..

Each li contains three attributes: attr-x, attr-y and attr-z.

I am trying to sort the ul according to:

top group is attr-x=true. bottom group is attr-x=false.

for each one of both groups: Sort by attr-y (biggest numbers to smallest numbers).

After that, ONLY if there are elements with equal attr-y, sort by attr-z.

Examples:

<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>

first sort (data-x=true in top, data-x=false in bottom):

<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>

second sort (for each sub groups, sort by 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>

Third sort (if data-y is equal in sub group, sort by 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>

This is my fiddle: http://jsfiddle.net/5uq2qrte/

Any help appreciated!

解决方案

You can use sort() like this.

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进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！