将新列表项插入其正确的字母位置

Question

我想知道什么是最有效的方式插入一个项目(在这种情况下,一个字符串),正确的字母顺序,只有JavaScript(不是jQuery)？我认为通过在插入项目后直接排序列表就足够了,但是不起作用.我通过输入到文本字段中的值获取要插入的值.

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

• 信天翁
• 扇尾鸽
• KEA
• 猕猴桃
• 南秧鸡
• TUI

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

• 信天翁
• 铃鸟
• 扇尾鸽
• KEA
• 猕猴桃
• 南秧鸡
• TUI

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

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;

我在排序数组中查看了这个链接(我假设我的编程知识,每个列表元素都在一个数组中).我理解按字典顺序排序是什么 - 本周早些时候我学到了这一点.

如果有人能帮我解决这个问题,那将非常感激.

Answer 1

birdList.sort();

这是行不通的,因为返回的值document.getElementById()是从来没有的Array,这是任何一个元素的引用或null如果元素没有被发现.只有Arrays(默认情况下)有一个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.