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

Question

我试图获取列表的内容，这不是按字母顺序排列的，然后将每一项添加到数组中，按字母顺序排序，然后按字母顺序插入列表中。

简单语言:我需要使用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/

Answer 1

没有必要使用jQuery，您可以使用香草JavaScript。;)

1. 以父元素(推荐id作为标识符)
2. 将节点列表转换为数组，因为排序将非常容易。
3. 按自定义条件"element.innerText“排序数组是可见的部分。
4. 按正确顺序逐项移动到末尾。 //选择器到父元素(id的最佳方法) var parent = document.querySelector("ul")，//将项(parent.children)放入数组itemsArray = Array.prototype.slice.call(parent.children)；//按自定义标准itemsArray.sort对数组中的项进行排序(函数(a，b) { //内部文本最适合(即使在某种情况下)，如果(a.innerText < b.innerText)返回-1；如果(a.innerText > b.innerText)返回1；返回0；})；//重新排序DOM itemsArray.forEach中的项(函数(项){ //按正确的顺序依次移动到末尾parent.appendChild (item)；})；

它比jQuery快100倍，请查看性能比较图表http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/。

Answer 2

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

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

更新小提琴

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

Answer 3

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

您可以使用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>

​