如何使用JavaScript对<li>内部的元素进行排序<ul>(气泡排序)？

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)