Javascript jquery按不同的值对嵌套列表排序（不按字母顺序）

我正在尝试使用不同的变量对嵌套列表进行排序。因此，我有如下几点：

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

阿根廷葡萄酒奖
阿根廷2012年银牌




皇家阿德莱德葡萄酒展
2012年阿根廷地区奖杯




智利葡萄酒奖
阿根廷2012年蓝金奖

我想做的是能够单击，说“trophy”并对顶部带有“trophy”的项目进行排序，然后单击“gold”并将这些项目放在一起，等等。在我的示例中，当前每个项目都有一个，但可能有几个“gold”项目、“silver”项目，等等。我尝试了很多方法，但我最多只能让列表按字母顺序排序，这不是我需要的。 这些都来自JSP，我可以在适当的情况下添加额外的类-如果需要，我还可以更改列表结构。我之所以有嵌套列表，仅仅是为了使与图像的对齐更容易，而且因为将来可能会有额外的行（

）

我将列表按字母顺序排序的方式，如果有帮助的话：

$("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);
}));
});

$（“a.sort-by-trophy”）。单击（函数（）{
log（'sort-by-tropy-clicked'）；
var列表=$（“ul荣誉显示列表”）；
var desc=假；
list.append（list.children（）.get（）.sort）（函数（a，b）{
var aProp=$（a）.find（“.accolades组织名称”）.text（），
bProp=$（b）.find（“.accolades组织名称”）.text（）；
返回（aProp>bProp-1:aProp

---

无论如何，如果有人对我可能尝试的东西有任何想法，我会非常感激。

我建议您使用应该具有的值，然后生成输出（检查），每次单击排序，然后再次生成并替换它

我的意思是，你有原始数据：

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

---

然后，当单击排序链接时，您可以按正确的属性对列表数组进行排序，并生成一个新的html（使用下划线模板），然后用新的html替换旧的html。

为什么不使用类似datagrid的datatables？例如：在我看来，列表[语义上]不适合于单个项属性，为什么要使用它？chris，我没有考虑过这一点-但datatables只是用于表，不是吗？Bergi，我不确定我是否理解你的意思。是的，datagrid脚本仅用于表，但在你的情况下，这不是更好吗？您实际上使用了一个样式为表的列表，对吗？；）谢谢，我会看看underline.jsSo-我已经在谷歌上搜索了一下，我想我会根据给定元素是否包含某个值（“gold”等）动态创建一个模板，然后注入该模板？哦，我明白了。谢谢，我要试一试。