jQuery按不同值（不是按字母順序）對嵌套列表進行排序

Question

我正在嘗試使用不同的變量對嵌套列表進行排序。 因此，我有以下內容：

<div id="title">
    <h2>AWARDS by TYPE</h2>
    <span>
      <p>Sort by: </p>
      <a href="#" class="sort-by-trophy">Trophy</a>
      <a href="#" class="sort-by-gold">Gold</a>
      <a href="#" class="sort-by-silver">Silver</a>
      <a href="#" class="sort-by-bronze">Bronze</a>
      <a href="#" class="sort-by-other">Other</a>
    </span>
 </div>

和列表：

<ul id="accolade-display-list"> 
<li class="accolade-display-list-item"> <img src="/images/us/law/accolades/organisation/27.jpg">
<ul>
  <li class="accolades-org-name"> Argentina Wine Awards </li>
  <li class="accolades-org-details">Silver Medal - 2012, Argentina</li>
</ul>
</li>
<li class="accolade-display-list-item"> <img src="/images/us/law/accolades/organisation/2.jpg">
<ul>
  <li class="accolades-org-name"> Royal Adelaide Wine Show </li>
  <li class="accolades-org-details">Regional Trophy - 2012, Argentina</li>
</ul>
</li>
 <li class="accolade-display-list-item"> <img src="/images/us/law/accolades/organisation/57.jpg">
<ul>
  <li class="accolades-org-name"> Wines of Chile Awards </li>
  <li class="accolades-org-details"> Blue Gold Medal - 2012, Argentina</li>
</ul>
</li>
</ul>

我想做的是能夠單擊並說“戰利品”，並在頂部帶有“戰利品”的項目進行排序，然后單擊“金”並在頂部將這些項目放在一起，依此類推。當前有一種在我的示例中，每個都有，但是可能有幾個“金”項，“銀”項等等。 我已經嘗試了多種方法，但是最多只能使列表按字母順序排序，這不是我所需要的。 這些來自JSP，我也許可以在適當的情況下添加其他類-如果需要，我還可以更改列表結構。 我擁有嵌套列表的原因僅僅是為了使與圖像的對齊更容易，並且因為將來可能還會有額外的一行（ <li> ）。

如果有幫助，我可以按照字母順序對列表進行排序：

$("a.sort-by-trophy").click(function(){
console.log('sort-by-trophy clicked');
var list = $("ul#accolade-display-list");
var desc = false;
list.append(list.children().get().sort(function(a, b) {
var aProp = $(a).find(".accolades-org-name").text(),
    bProp = $(b).find(".accolades-org-name").text();
return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1);
}));
});

無論如何，如果有人對我可以嘗試的事情有任何想法，我將不勝感激。

Answer 1

我建議您具有應該具有的值，然后生成輸出（檢查underscore.js ），每次單擊排序后，再次生成並替換它。

我的意思是，您擁有原始數據：

var list = [{name: 'Argentina Wine Awards', medal: 'silver', ... }, {}, ...];

然后，當您單擊排序鏈接時，您可以通過正確的屬性對列表數組進行排序，並生成一個新的html（使用下划線模板），然后用新的html替換舊的html。