Alphabetize a list using JS or jQuery

Question

I'm trying to take the contents of a list, that is not in alphabetical order, then by adding each item to an array, sort them into alphabetical order and insert them back into the list in alphabetical order.

Plain language: I need to alphabetize a list using JS or 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

这里不需要生成数组，可以sort()直接在选择li元素产生的jQuery对象上使用该方法。排序后，您可以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元素应该改为使用 a class。

Answer 2

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

1. 取父元素（推荐id作为标识符）
2. 将节点列表转换为数组，因为排序会很容易
3. 按自定义标准对数组进行排序“element.innerText”是可见部分

4. 按正确顺序逐项移至末尾

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