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

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

javascript sorting

Javascript 将新列表项插入其正确的字母顺序位置,javascript,sorting,Javascript,Sorting,我想知道，用JavaScript（不是jQuery）将项目（在本例中是字符串）插入到正确的字母顺序中最有效的方法是什么？我认为在插入项目后直接对列表进行排序就足够了，但不起作用。我通过在文本字段中输入的值获取要插入的值插入新项之前，列表如下所示：信天翁扇尾基亚猕猴桃高河途易如果我选择将“Bellbird”添加到此列表中，我希望列表现在如下所示：信天翁行李员扇尾基亚猕猴桃高河途易以下是我用来尝试实现预期结果的代码： HTML: 我已经研究了排序数组（根据编程

我想知道，用JavaScript（不是jQuery）将项目（在本例中是字符串）插入到正确的字母顺序中最有效的方法是什么？我认为在插入项目后直接对列表进行排序就足够了，但不起作用。我通过在文本字段中输入的值获取要插入的值

插入新项之前，列表如下所示：

信天翁
扇尾
基亚
猕猴桃
高河
途易

如果我选择将“Bellbird”添加到此列表中，我希望列表现在如下所示：

信天翁
行李员
扇尾
基亚
猕猴桃
高河
途易

以下是我用来尝试实现预期结果的代码：

HTML:

我已经研究了排序数组（根据编程知识，我假设每个列表元素都在一个数组中）。我理解什么是词典排序——这周早些时候我学到了这一点

如果有人能在这件事上帮助我，我将非常感激

birdList.sort();

这将不起作用，因为

document.getElementById（）

返回的值从来都不是

数组，如果找不到该元素，它可能是对元素的引用，也可能是null。只有Array
s（默认情况下）具有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]);
}


最后，如果您确实有jQuery供您使用
$(birdList).find("li").sort(function(a, b) {
    return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase());
}).each(function() {
    $(birdList).append(this);
});

.
您不必对整个列表重新排序，然后重新插入每个项目
您可以在排序列表中找到插入新项的位置
<!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>


测试页
函数addNewBird（）{
var bird=document.getElementById（“addNewBirdField”）.value；
如果（鸟）{
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”）；
appendChild（document.createTextNode（bird））；
who（who&&who.innerHTMLWell从我的观点来看，sort（）可以很好地工作，但是在birdList（不是数组，而是ul-DOM元素）上调用sort是没有意义的。获取所有li元素并对它们进行排序！：）。我花了一点时间阅读了语句（array.prototype…）为了理解它在做什么。这是我还没有遇到的事情，我的理解是正在“动态”创建一个匿名函数，该函数比较两个值，然后通过sort（）函数进行解析，以按字母顺序对每个列表项的值进行字典排序。我还尝试了类似的方法“var birds=birdList.getElementsByTagName（“li”）；”并使用普通的birdList.sort-但我现在知道它为什么不起作用了。在jQuery示例的最后一行中，“this”指的是什么？birdList lis？
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);
});

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

<!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>