Javascript 使用jQuery中的跨距对列表进行排序
我在尝试对跨距在范围内的列表进行排序时遇到问题 例如:Javascript 使用jQuery中的跨距对列表进行排序,javascript,jquery,list,sorting,Javascript,Jquery,List,Sorting,我在尝试对跨距在范围内的列表进行排序时遇到问题 例如: <a href="">Sort by name</a> <a href="">Sort by year</a> <a href="">Sort by fruit</a> <ul> <li> <span class="name">Carl</span> <span class="year">1954&l
<a href="">Sort by name</a>
<a href="">Sort by year</a>
<a href="">Sort by fruit</a>
<ul>
<li>
<span class="name">Carl</span>
<span class="year">1954</span>
<span class="fruit">Apple</span>
</li>
<li>
<span class="name">Ann</span>
<span class="year">1932</span>
<span class="fruit">Banana</span>
</li>
<li>
<span class="name">Joe</span>
<span class="year">1961</span>
<span class="fruit">Pineapple</span>
</li>
</ul>
-
卡尔
1954
苹果
-
安
1932
香蕉
-
乔
1961
菠萝
因此,我希望能够按照这三个“类别”进行排序。有人有什么建议吗?我建议重新排列表中的数据(因为这就是它所代表的),然后使用类似的方法,这可能也会有所帮助:如果我们稍微更改您的标记以更好地处理链接,例如:
<div id="sort">
<a href="#name">Sort by name</a>
<a href="#year">Sort by year</a>
<a href="#fruit">Sort by fruit</a>
</div>
<ul id="things">
$("#sort a").click(function(e) {
var desc = $(this).hasClass("asc"),
sort = this.hash.substr(1),
list = $("#things");
list.append(list.children().get().sort(function(a, b) {
var aProp = $(a).find("span."+sort).text(),
bProp = $(b).find("span."+sort).text();
return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1);
}));
$(this).toggleClass("desc", desc)
.toggleClass("asc", !desc)
.siblings().removeClass("asc desc");
e.preventDefault();
});
$("#sort a").click(function(e) {
var desc = $(this).hasClass("asc"),
sort = this.hash.substr(1),
list = $("#things");
$(list.children().detach().find("span."+sort).get().sort(function(a, b) {
var aProp = $.text([a]),
bProp = $.text([b]);
return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1);
})).parent().appendTo(list);
$(this).toggleClass("desc", desc)
.toggleClass("asc", !desc)
.siblings().removeClass("asc desc");
e.preventDefault();
});
.这真的很有用;我从中吸取了教训,创建了一个使用aria labelledby的版本,而不是
a
和hash
。我还使用引导精灵来显示排序状态。不管怎样,我明天会回来投票表决这个答案!