javascript - 使用 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，你可以使用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/