Question

我在尝试使用范围内的列表排序时遇到问题。

示例：

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

所以我希望能够按这三个“类别”进行排序。有人有建议吗？

Answer 1

如果我们稍微更改您的标记以更好地处理链接，请执行以下操作：

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

You can test it out here，当然还有其他方法（上面的内容可以进一步细化）......我的主要观点是用Array.sort()演示你可以快速完成这项工作。

以下是上述内容的细分：

选择#XXX并获取XXX，这是我们要排序的课程（您可以在这里使用data- attribute）
抓住列表 - 保留参考，以便我们不再继续选择
带孩子（<li> s），使用.get()获取DOM元素的原始数组
.sort()该数组由：
- 传递a和b，这些是<li>元素
- .find()我们关心的<span>
- 获取<span>
- 返回该文本的比较（如果我们是desc则反向，反转排序）
.append()已排序的元素返回list
最后一点只是更改排序样式，如果它已经按升序排序，则将其更改为desc类，否则将其设为asc类，并从任何同级中删除任一类。< / LI>

如果你有非常多的元素，你会想采取不同的方法，比如在其他答案中发布的插件......他们只解析数据更新并将结果缓存到对象中，因此DOM更少排序时的遍历（与其他所有内容相比，价格昂贵）。

作为如何改进上述内容（但作为示例不太可读）的示例，最初应选择<span>元素，减少选择器和.text()时间，如下所示：

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

You can test out that version here

Answer 2

我建议您将数据排列在表格中（因为它代表的是什么），然后使用类似JQuery table sorter plugin

的内容

Answer 3

这也可能有所帮助：jQuery Quicksand plugin

在jQuery中对带有跨度的列表进行排序

3 个答案: