ページ上のアンカーのリストをデータ属性で並べ替えますか？

Question

私はこのコードのビットを持っている：

<div class="list-group"> 
<a class="list-group-item" data-order="10" href="/pdf/Early%20Childhood/Little%20Treasures/0.10_Sample%20Document%203%20-%20Copy%20(3).pdf">10 : Sample Document 3 - Copy (3).pdf</a> 
<a class="list-group-item" data-order="11" href="/pdf/Early%20Childhood/Little%20Treasures/0.11_Sample%20Document%203%20-%20Copy.pdf">11 : Sample Document 3 - Copy.pdf</a> 
<a class="list-group-item" data-order="12" href="/pdf/Early%20Childhood/Little%20Treasures/0.12_Sample%20Document%203.pdf">12 : Sample Document 3.pdf</a> 
<a class="list-group-item" data-order="13" href="/pdf/Early%20Childhood/Little%20Treasures/0.13_Sample%20Document%204%20-%20Copy%20(2).pdf">13 : Sample Document 4 - Copy (2).pdf</a> 
<a class="list-group-item" data-order="14" href="/pdf/Early%20Childhood/Little%20Treasures/0.14_Sample%20Document%204%20-%20Copy%20(3).pdf">14 : Sample Document 4 - Copy (3).pdf</a> 
<a class="list-group-item" data-order="15" href="/pdf/Early%20Childhood/Little%20Treasures/0.15_Sample%20Document%204%20-%20Copy.pdf">15 : Sample Document 4 - Copy.pdf</a> 
<a class="list-group-item" data-order="16" href="/pdf/Early%20Childhood/Little%20Treasures/0.16_Sample%20Document%204.pdf">16 : Sample Document 4.pdf</a> 
<a class="list-group-item" data-order="1" href="/pdf/Early%20Childhood/Little%20Treasures/0.1_Sample%20Document%20-%20Copy%20(2).pdf">1 : Sample Document - Copy (2).pdf</a> 
<a class="list-group-item" data-order="2" href="/pdf/Early%20Childhood/Little%20Treasures/0.2_Sample%20Document%20-%20Copy%20(3).pdf">2 : Sample Document - Copy (3).pdf</a> 
<a class="list-group-item" data-order="3" href="/pdf/Early%20Childhood/Little%20Treasures/0.3_Sample%20Document%20-%20Copy.pdf">3 : Sample Document - Copy.pdf</a> 
<a class="list-group-item" data-order="4" href="/pdf/Early%20Childhood/Little%20Treasures/0.4_Sample%20Document%202%20-%20Copy%20(2).pdf">4 : Sample Document 2 - Copy (2).pdf</a> 
<a class="list-group-item" data-order="5" href="/pdf/Early%20Childhood/Little%20Treasures/0.5_Sample%20Document%202%20-%20Copy%20(3).pdf">5 : Sample Document 2 - Copy (3).pdf</a> 
<a class="list-group-item" data-order="6" href="/pdf/Early%20Childhood/Little%20Treasures/0.6_Sample%20Document%202%20-%20Copy.pdf">6 : Sample Document 2 - Copy.pdf</a> 
<a class="list-group-item" data-order="7" href="/pdf/Early%20Childhood/Little%20Treasures/0.7_Sample%20Document%202.pdf">7 : Sample Document 2.pdf</a> 
<a class="list-group-item" data-order="8" href="/pdf/Early%20Childhood/Little%20Treasures/0.8_Sample%20Document.pdf">8 : Sample Document.pdf</a> 
<a class="list-group-item" data-order="9" href="/pdf/Early%20Childhood/Little%20Treasures/0.9_Sample%20Document%203%20-%20Copy%20(2).pdf">9 : Sample Document 3 - Copy (2).pdf</a> 
</div> 

は、私はちょうど私がそれらに追加したデータ次の属性によってこれらのアンカータグを注文したいです。

私はこれをjqueryおよび/またはjavascriptで達成しようとしていますが、私は.sort関数に苦しんでいます。

誰でもこれを達成するためのすてきな方法がありますか？

Answer 1

これはそれを行う必要があります。

$("a").sort(function(a,b){ 
 
    return parseInt($(a).attr("data-order")) - parseInt($(b).attr("data-order")); 
 
}).appendTo($(".list-group"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="list-group"> 
 
<a class="list-group-item" data-order="10" href="/pdf/Early%20Childhood/Little%20Treasures/0.10_Sample%20Document%203%20-%20Copy%20(3).pdf">10 : Sample Document 3 - Copy (3).pdf</a> 
 
<a class="list-group-item" data-order="11" href="/pdf/Early%20Childhood/Little%20Treasures/0.11_Sample%20Document%203%20-%20Copy.pdf">11 : Sample Document 3 - Copy.pdf</a> 
 
<a class="list-group-item" data-order="12" href="/pdf/Early%20Childhood/Little%20Treasures/0.12_Sample%20Document%203.pdf">12 : Sample Document 3.pdf</a> 
 
<a class="list-group-item" data-order="13" href="/pdf/Early%20Childhood/Little%20Treasures/0.13_Sample%20Document%204%20-%20Copy%20(2).pdf">13 : Sample Document 4 - Copy (2).pdf</a> 
 
<a class="list-group-item" data-order="14" href="/pdf/Early%20Childhood/Little%20Treasures/0.14_Sample%20Document%204%20-%20Copy%20(3).pdf">14 : Sample Document 4 - Copy (3).pdf</a> 
 
<a class="list-group-item" data-order="15" href="/pdf/Early%20Childhood/Little%20Treasures/0.15_Sample%20Document%204%20-%20Copy.pdf">15 : Sample Document 4 - Copy.pdf</a> 
 
<a class="list-group-item" data-order="16" href="/pdf/Early%20Childhood/Little%20Treasures/0.16_Sample%20Document%204.pdf">16 : Sample Document 4.pdf</a> 
 
<a class="list-group-item" data-order="1" href="/pdf/Early%20Childhood/Little%20Treasures/0.1_Sample%20Document%20-%20Copy%20(2).pdf">1 : Sample Document - Copy (2).pdf</a> 
 
<a class="list-group-item" data-order="2" href="/pdf/Early%20Childhood/Little%20Treasures/0.2_Sample%20Document%20-%20Copy%20(3).pdf">2 : Sample Document - Copy (3).pdf</a> 
 
<a class="list-group-item" data-order="3" href="/pdf/Early%20Childhood/Little%20Treasures/0.3_Sample%20Document%20-%20Copy.pdf">3 : Sample Document - Copy.pdf</a> 
 
<a class="list-group-item" data-order="4" href="/pdf/Early%20Childhood/Little%20Treasures/0.4_Sample%20Document%202%20-%20Copy%20(2).pdf">4 : Sample Document 2 - Copy (2).pdf</a> 
 
<a class="list-group-item" data-order="5" href="/pdf/Early%20Childhood/Little%20Treasures/0.5_Sample%20Document%202%20-%20Copy%20(3).pdf">5 : Sample Document 2 - Copy (3).pdf</a> 
 
<a class="list-group-item" data-order="6" href="/pdf/Early%20Childhood/Little%20Treasures/0.6_Sample%20Document%202%20-%20Copy.pdf">6 : Sample Document 2 - Copy.pdf</a> 
 
<a class="list-group-item" data-order="7" href="/pdf/Early%20Childhood/Little%20Treasures/0.7_Sample%20Document%202.pdf">7 : Sample Document 2.pdf</a> 
 
<a class="list-group-item" data-order="8" href="/pdf/Early%20Childhood/Little%20Treasures/0.8_Sample%20Document.pdf">8 : Sample Document.pdf</a> 
 
<a class="list-group-item" data-order="9" href="/pdf/Early%20Childhood/Little%20Treasures/0.9_Sample%20Document%203%20-%20Copy%20(2).pdf">9 : Sample Document 3 - Copy (2).pdf</a> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
</div>

アイデアは、あなたがそれらをソートし、完了したら、それらを再接続する前に要素を切り離すことです。

var sorted = $('.list-group-item').sort(function (a, b) { 
    var contentA = parseInt($(a).data('order')); 
    var contentB = parseInt($(b).data('order')); 

    return (contentA < contentB) ? - 1 : (contentA > contentB) ? 1 : 0; 
}) 

$('.list-group').replaceWith(sorted.each(function(obj, link){ 
    return link; 
})) 

そして、実施例here：

Answer 2

はここだけで、別の提案です。

ロジック：

1. が自分dataプロパティを使用して順序付けられた要素の配列を作成します。

2. divを選択し、内容をsortedの 要素の配列に置き換えます。