Question

我想知道将项目（在本例中为字符串）插入其正确的字母顺序，只使用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（我假设我的编程知识是每个列表元素都在一个数组中）。我理解按字典顺序排序是什么 - 本周早些时候我学到了这一点。

如果有人可以帮助我，我会非常感激。

Answer 1

您不必重新排序整个列表，并重新插入每个项目。

您可以在排序列表中找到位置以插入新项目。

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Test Page</title>


<script>
function addNewBird(){
    var bird= document.getElementById("addNewBirdField").value;
    if(bird){
        bird= bird.charAt(0).toUpperCase()+ bird.substring(1).toLowerCase();
        var birdList= document.getElementById("birds"),
        list= birdList.getElementsByTagName('li'),
        i= 0, who= list[0],

        newBirdItem= document.createElement("li");
        newBirdItem.appendChild(document.createTextNode(bird));

        while(who && who.innerHTML<bird) who= list[++i];
        if(who) birdList.insertBefore(newBirdItem, who);
        else birdList.appendChild(newBirdItem);
    }
    return newBirdItem;
}

</script>
</head>
<body>

<div>
<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" onclick="addNewBird()">Add new bird</button></p>
</div>

</body>
</html>

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

1 个答案: