0

我正在尝试使用不同的变量对嵌套列表进行排序。所以，我有以下内容：

<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);
}));
});

无论如何，如果有人对我可以尝试的东西有任何想法，我将不胜感激。

4

1 回答 1

0

我建议拥有你应该拥有的值，然后生成输出（检查underscore.js），每次单击排序时，然后再次生成并替换它。

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

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

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

于 2012-10-04T15:20:01.553 回答