Sortieren ul von mehreren Werten

Question

I eine UL-Liste mit Li-s haben ..

Jeder Li enthält drei Attribute: attr-x, y und attr-attr-z.

Ich versuche, die ul nach sortieren:

Spitzengruppe ist attr-x = true. untere Gruppe ist attr-x = falsch.

für jede der beiden Gruppen: Sortieren nach attr-y (größte Zahlen zu kleinsten Zahlen).

Danach NUR wenn Elemente mit gleichem attr-y vorhanden sind, nach attr-z sortieren.

Beispiele:

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

zuerst sortieren (data-x = true in top, Daten-x false = in unten):

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

zweiten Sorte (für jede Untergruppen, sortiert nach Daten-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 (wenn die Daten in Sub-Y-Gruppe gleich ist, sortiert nach Daten-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> 

Das ist meine Geige: http://jsfiddle.net/5uq2qrte/

Jede Hilfe dankbar!

Answer 1

Sie können sort() wie folgt verwenden.

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>