Question

我有以下DOM结构（无序列表），我想使用jQuery对a href标记名称进行排序。

结构如下：

<div id="refmenu">
<ul id="list">
<li><a href="....">Google</a></li>
<li><a href="....">Apple</a></li>
<li><a href="....">IBM</a></li>
<li><a href="....">Yahoo!</a></li>
<li><a href="....">Hotmail</a></li>
</ul>
</div>

基于以上所述，希望能够通过jQuery函数运行它，该函数将按字母顺序对无序列表名称进行排序，显然也将a href链接与锚标记名称保持在一起。

希望有人可以提供帮助。

感谢。

Answer 1

给出TinySort插件，它按内容或属性对子节点进行排序：Example

修改 -

$("div#refmenu>ul#platsys>li").tsort("a.title");

此外，没有理由在 ID选择器之前进行额外过滤，选择标记名称 不会加速 通过id选择时的性能。你的 ul 的id名称也不是platsys，所以我不知道你从哪里得到它应该是 ul＃list＆gt; li ，但要缩短所有这些我需要的额外不需要的代码

$("#refmenu>#list>li").tsort("a.title");

实际上来自你的html我认为这将是：

$("#list>li").tsort("a.title");

Answer 2

试试这个：

var list = $("#list"),
    listItems = Array.prototype.slice.call(list.find("li"));
listItems.sort(function(a, b) {
    a = $("a", a).text(), b = $("a", b).text();
    return a < b ? -1 : a > b ? 1 : 0;
});
listItems.forEach(function(val) {
    list.append($(val).remove());
});

如果您想要使用与锚文本不同的条件进行排序，请将text()替换为您想要的任何内容。

Answer 3

您可以尝试List.js，这会将您的列表功能扩展为极端

它的轻量级[仅3K脚本]
使用类
可搜索，可排序和可过滤

<强> HTML

<div id="my-list">
    <ul class="list">
       <li>
           <h3 class="name">Luke</h3>
       </li>
       <li>
           <h3 class="name">John</h3>
       </li>
    </ul>
</div>

<强>的Javascript

var options = {
    valueNames: ['name']
};
var myList = new List('my-list', options);

Answer 4

肯定你的所有href都将以http：//或www开头？如何排序有帮助？

订购清单会不能完成这项工作吗？

如何在锚标记内对无序列表进行排序

4 个答案: