如何排序<li>里面的元素<ul>使用 JavaScript（冒泡排序）？

Question

我有 3

里面的元素：

 <ul id = "friends"> <li>Zvonar</li> <li>Ivan</li> <li>Petro</li> </ul>

和JS代碼：

 let list = document.getElementsByTagName('li'); for (let i = 0; i < list.length; i++) { for (let j = 0; j < list.length; j++) { if (list[j].textContent > list[j + 1].textContent) { buf = list[j].textContent; list[j] = list[j + 1].textContent; list[j + 1] = buf; } } }

但它給了我一個錯誤，即 [j + 1] 未定義，在第四個字符串。

有沒有辦法使用 JavaScipt 對它們進行排序？ 將不勝感激任何答案。

Answer 1

您正在引用不存在的數組索引。 該列表從索引 0-2 開始，因此在最后一次迭代中，if 語句將中斷，因為您正在執行 2+1 = list[3]。 但是數組沒有那個索引。 由於它是數組的最后一個索引，並且該索引已經針對 n-1 索引進行了檢查，因此沒有理由對其進行檢查。 所以我認為您可以將循環更改為：

for (let j = 0; j < list.length-1; j++) {...

我沒有測試過這個，但我認為這會解決你的問題

Answer 2

當您在最后一個索引上時，您添加一個以獲得下一個索引，但那里什么也沒有。

我個人不會交換文本。 我會傳入一個元素數組。

 const bubbleSortText = function(arr) { const len = arr.length; for (let i = 0; i < len; i++) { for (let j = 0; j < len - 1; j++) { if (arr[j].innerText.localeCompare(arr[j + 1].innerText) === 1) { const tmp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = tmp; } } } return arr; }; const ul = document.querySelector('#friends'); const lis = Array.from(document.querySelectorAll('#friends li')); const newOrder = bubbleSortText(lis); newOrder.forEach(function (li) { ul.appendChild(li); });

 <ul id="friends"> <li>Zvonar</li> <li>Ivan</li> <li>Petro</li> </ul>

Answer 3

let list = document.getElementsByTagName('li');
let arr = Array.from(list);
arr.sort((a, b) => a.innerText > b.innerText ? 1 : a.innerText < b.innerText ? -1 : 0)