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替换为新的。

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

1 个答案: