UL

Question

Iは、Li-SとULのリストを持っている..

各Liが3つの属性を含んでいます。

私はによると、UL並べ替えしようとしています：

トップグループはATTR-X =真です。 下位グループは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> 

最初のソート（データX =真上部に、底部のデータX =偽）：

<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ソートデータ-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>