排序<li>貨物集合中按字母順序排列的元素</li>

Question

我想在 cargo collective 中列出一個列表，並讓它們按第一個字符的字母順序自動排序。 現在我有兩個版本的 JavaScript 編碼，但它們不能同時包含大寫和小寫。

html是這樣的：

html代碼

javascript 的兩個版本：

第一個

js-1

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

第二個

js-2

<script type="text/javascript">
var list = document.getElementById('mylist');

var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
    itemsArr.push(items[i]);
}
}

 itemsArr.sort(function(a, b) {
 return a.innerHTML == b.innerHTML
      ? 0
      : (a.innerHTML > b.innerHTML ? 1 : -1);
 });

for (i = 0; i < itemsArr.length; ++i) {
 list.appendChild(itemsArr[i]);
}
 </script>

都是這樣的結果

如何使底部的小寫單詞也在列表中，而不是將它們分開......

謝謝！！！

Answer 1

在第二個腳本中，在比較它們之前將toUpperCase()應用於兩個文本，或者——更花哨一點——你可以使用localeCompare方法的options參數：

 var list = document.getElementById('mylist'); var itemsArr = Array.from(list.children).filter(li => li.textContent.trim()); // Only non-empty itemsArr.sort(function(a, b) { return a.textContent.localeCompare(b.textContent, "en", { sensitivity: "base" }); }); // Optionally remove items first? (So empty items are gone?) list.innerHTML = ""; for (let item of itemsArr) { list.appendChild(item); }

 <ul id="mylist"> <li></li> <li></li> <li></li> <li>apple Juice</li> <li>water</li> <li>lemon</li> <li>Icetea</li> <li>cola</li> <li>Tonic</li> <li></li> </ul>