使用 JS 或 jQuery 按字母顺序排列列表答案

【问题标题】：Alphabetize a list using JS or jQuery使用 JS 或 jQuery 按字母顺序排列列表
【发布时间】：2016-03-24 21:00:33
【问题描述】：

我正在尝试获取列表的内容，而不是按字母顺序排列，然后通过将每个项目添加到数组中，将它们按字母顺序排序，然后按字母顺序将它们重新插入列表中。

普通语言：我需要使用 JS 或 jQuery 按字母顺序排列列表。

这就是我所拥有的。我只是不知道如何将数组的内容插入回列表中。

提前谢谢大家:)

var sectors = [];
$("li").each(function() { sectors.push($(this).text()) });
sectors.sort();
console.log(sectors);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<ul>
  <li id="alphabet">B</li>
  <li id="alphabet">C</li>
  <li id="alphabet">A</li>
</ul>

https://jsfiddle.net/stu16396/

【问题讨论】：

id="alphabet" 三次？你真的应该使用class。
看看这个james.padolsey.com/snippets/sorting-elements-with-jquery

标签： javascript jquery dom

【解决方案1】：

不需要jQuery，你可以使用Vanilla JavaScript。 ;)

取父元素（推荐id作为标识）
将节点列表转换为数组，因为这样排序会很容易
按自定义条件排序数组“element.innerText”是可见部分

以正确的顺序逐项移动到末尾

// selector to parent element (best approach by id)
var parent = document.querySelector("ul"),
    // take items (parent.children) into array
    itemsArray = Array.prototype.slice.call(parent.children);

// sort items in array by custom criteria
itemsArray.sort(function (a, b) {
    // inner text suits best (even when formated somehow)
    if (a.innerText < b.innerText) return -1;
    if (a.innerText > b.innerText) return 1;
    return 0;
});

// reorder items in the DOM
itemsArray.forEach(function (item) {
    // one by one move to the end in correct order
    parent.appendChild(item);
});

比jQuery快一百倍，查看性能对比图http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/

【讨论】：

感谢您提供详细的解决方案和资源。 JS 的胜利！

【解决方案2】：

这里不需要生成数组，你可以直接对选择li元素产生的jQuery对象使用sort()方法。排序后，您可以按更正的顺序将它们附加回父 ul。试试这个：

$("li").sort(function(a, b) {
    var aText = $(a).text(), bText = $(b).text();
    return aText < bText ? -1 : aText > bText ? 1 : 0;
}).appendTo('ul');

Updated fiddle

另请注意，在文档中具有重复的 id 属性是无效的。您的#alphabet 元素应改为使用class。

【讨论】：

完美运行。谢谢！

【解决方案3】：

将.alphabet元素处的id调整为className，以防止document中的ids重复。

您可以使用String.prototype.split() 和"" 作为参数，Array.prototype.sort()，.text()

var li = $(".alphabet"), text = li.text().split("").sort();

li.text(function(index) {
  return text[index]
})

<script src="//code.jquery.com/jquery-git.js"></script>
<ul>
  <li class="alphabet">B</li>
  <li class="alphabet">C</li>
  <li class="alphabet">A</li>
</ul>

【讨论】：

【解决方案4】：

你可以这样做：

$("li").each(function(i) { $(this).text(sectors[i]) });

在您对 sectors 数组进行排序之后。请注意，您的 id 必须是唯一的。

【讨论】：

为什么不马上sort？
@RokoC.Buljan 你到底是什么意思？该数组已使用 sectors.sort() 排序。

【解决方案5】：

我已经更新了你的jsfiddle here，基本上你已经删除了<li>s，然后将它们添加到新订单中。

var sectors = [];
$("li").each(function() { sectors.push($(this).text()) });
sectors.sort();
$("ul li").remove(); // Clears list

for( word of sectors) {
    $("ul").append("<li>" + word + "</li>");
}

【讨论】：