在 jQuery 中订购 <UL>/<OL> 的最简单方法是什么？答案

【问题标题】：What is the easiest way to order a <UL>/<OL> in jQuery?在 jQuery 中订购 <UL>/<OL> 的最简单方法是什么？
【发布时间】：2010-09-23 04:40:27
【问题描述】：

我正在寻找一些示例代码，这些代码将按字母顺序对 HTML 列表中的列表项进行排序。有人可以帮忙吗？

这是一个供人们一起工作的示例列表：

<ul class="alphaList">
    <li>apples</li>
    <li>cats</li>
    <li>bears</li>
</ul>

【问题讨论】：

标签： jquery sorting

【解决方案1】：

var items = $('.alphaList > li').get();
items.sort(function(a,b){
  var keyA = $(a).text();
  var keyB = $(b).text();

  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
});
var ul = $('.alphaList');
$.each(items, function(i, li){
  ul.append(li); /* This removes li from the old spot and moves it */
});

【讨论】：

+1 这在多个地方都派上用场了，即使是对表格进行排序:-)
这将排序数字，然后是大写字母，然后是小写字母。即 ["5", "A", "B", "a", "b"] 可能不是某些人想要的。
@TonyR：这就是 JavaScript 对字符串进行排序的方式。我想您可以根据需要将字符串更改为大写/小写。
@Chatu：你不应该在追加之前清空 ul 吗？
@Acute：不，你不必这样做。当您执行.append 时，它实际上会从旧位置移除元素并将其放入新位置。

【解决方案2】：

试试这个：

var elems = $('.alphalist li').detach().sort(function (a, b) {
  return ($(a).text() < $(b).text() ? -1 
        : $(a).text() > $(b).text() ? 1 : 0);
}); 
$('.alphalist').append(elems);

【讨论】：

这只是已接受答案的更简洁版本。另一个更好地理解这个概念，但这更短。两者兼得真好！

【解决方案3】：

对于未来的谷歌用户，我发现这个插件非常有用。它可以选择为非拉丁语言定义字符顺序。

旧版本（依赖 jQuery）

$('.submenu > li').tsort({
    charOrder: 'abcçdefgğhıijklmnoöprsştuüvyz'
});

对于纯英文字符，不需要定义选项

$('.submenu > li').tsort();

当前版本（独立于 jQuery）（2016 年 3 月 29 日）

当前版本的 tinysort 现在独立于 jQuery。纯 JavaScript。我更新了 jsfiddle 以供新版本使用。

tinysort('.submenu > li', {
    charOrder: 'abcçdefgğhıijklmnoöprsştuüvyz'
});

演示 http://jsfiddle.net/ergec/EkScy/

网站 http://tinysort.sjeiti.com/

【讨论】：

localeCompare 函数不能说明这一点吗？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
<script type="text/javascript">$('.sortAlpha > li').tsort();</script> 也很好用！
@Tomalla 似乎浏览器对localeCompare 的支持不是那么好。需要 IE 11，桌面 Safari 和大多数移动浏览器根本不支持它。因此，在不久的将来使用它不会是最佳做法。
@MaggewDotCom charOrder 仅用于区域设置支持。仅限英文字符，tsort() 本身就足够了。