如何排序<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)