gpt4 book ai didi

javascript - 将新列表项插入其正确的字母顺序位置

转载 作者:数据小太阳 更新时间:2023-10-29 04:11:53 25 4
gpt4 key购买 nike

我想知道仅使用 JavaScript(而非 jQuery)将项目(在本例中为字符串)插入其正确字母顺序的最有效方法是什么?我认为在插入项目后直接对列表进行排序就足够了,但这是行不通的。我通过在文本字段中输入的值获取要插入的值。

在插入新项目之前,列表如下所示:

  • 信天翁
  • 扇尾
  • 凯亚
  • 猕猴桃
  • 高和

如果我选择将“Bellbird”添加到此列表,我希望该列表现在看起来像:

  • 信天翁
  • 铃鸟
  • 扇尾
  • 凯亚
  • 猕猴桃
  • 高和

这是我用来尝试实现预期结果的代码:

HTML:

<ul id="birds">
<li>Albatross</li>
<li>Fantail</li>
<li>Kea</li>
<li>Kiwi</li>
<li>Takahe</li>
<li>Tui</li>
</ul>

<p><label for="addNewBirdField">Add new bird: </label>
<input type="text" id="addNewBirdField" /></p>

<p><button id ="addItem">Add new bird</button></p>

JavaScript:

function addNewBird()
{
var birdList = document.getElementById("birds"); //get birds unordered list

var newBirdItem = document.createElement("li"); // create new li element

var bird = document.getElementById("addNewBirdField").value // get data from form field

var birdValue = document.createTextNode(bird); // create new textNode with value from previous step

newBirdItem.appendChild(birdValue); // append textNode from previous step to li element (newBirdItem)

birdList.appendChild(newBirdItem); // append li element to bird list

birdList.sort();
}

var addItem = document.getElementById("addItem");
addItem.onclick = addNewBird;

我看过this link在排序数组时(我假设我的编程知识是每个列表元素都在一个数组中)。我了解什么是字典顺序排序 - 我在本周早些时候了解到了这一点。

如果有人能帮我解决这个问题,我将不胜感激。

最佳答案

birdList.sort();

这是行不通的,因为 document.getElementById() 返回的值从不数组,它要么是对元素或 null 如果未找到该元素。只有 Array(默认情况下)具有 sort() 方法。

相反,你想要的是......

var birds = birdList.getElementsByTagName("li");

birds = Array.prototype.slice.call(birds).sort(function(a, b) {
return a.firstChild.data.toLowerCase().localeCompare(b.firstChild.data.toLowerCase());
});

for (var i = 0, length = birds.length; i < length; i++) {
birdList.appendChild(birds[i]);
}

jsFiddle .

如果您不需要支持旧版浏览器...

var birds = birdList.querySelectorAll("li");

birds = Array.prototype.slice.call(birds).sort(function(a, b) {
return a.textContent.toLowerCase().localeCompare(b.textContent.toLowerCase());
}).forEach(function(bird) {
birdList.appendChild(bird);
});

jsFiddle .

最后,如果您确实拥有 jQuery 供您使用...

$(birdList).find("li").sort(function(a, b) {
return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase());
}).each(function() {
$(birdList).append(this);
});

jsFiddle .

关于javascript - 将新列表项插入其正确的字母顺序位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12542738/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com