Сортировка по ул нескольких значений

Question

У меня есть список уль с литий-ы ..

Каждый литий содержит три атрибута: атр-х, атр-у и атр-г.

Я пытаюсь сортировать ул согласно:

верхней группы атр-х = верно. нижняя группа 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> 

первого рода (данные-х = верно в верхней части, данных х = ложна в нижней части):

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

второго рода (для каждой подгруппы, сортировать по данные-у):

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

третьего рода (если данные у равен в подгруппе, сортировать по данным-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>