尝试使用javascript在我的html中对列表排序

下面的代码有点问题：

Html:

<p>click to <a onclick ="sortList(); return false;" href="#">sort</a></p>
<ul id="fruits">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

function sortList(listId) {
    var list = document.getElementbyId(listId);
    var children = list.childNodes;

    var listItemsHTML = new Array();
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeName === "LI") {
            listItemsHTML.push(children[i].innerHTML);
        }
    }
    listItemsHTML.sort();
    list.innerHTML="";
    for (var i = 0; i < listItemsHTML.length; i++) {
        list.innerHTML += "<li>" + listItemsHTML[i] + "</li>";
    }
}

单击以


苹果
橙色的
香蕉

Javascript:

<p>click to <a onclick ="sortList(); return false;" href="#">sort</a></p>
<ul id="fruits">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

function sortList(listId) {
    var list = document.getElementbyId(listId);
    var children = list.childNodes;

    var listItemsHTML = new Array();
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeName === "LI") {
            listItemsHTML.push(children[i].innerHTML);
        }
    }
    listItemsHTML.sort();
    list.innerHTML="";
    for (var i = 0; i < listItemsHTML.length; i++) {
        list.innerHTML += "<li>" + listItemsHTML[i] + "</li>";
    }
}

函数排序列表（listId）{
var list=document.getElementbyId（listId）；
var children=list.childNodes；
var listItemsHTML=新数组（）；
对于（变量i=0；i”+listItemsHTML[i]+“”；
}
}

---

然而，当我尝试点击链接对html进行排序时，什么都不做，我也不确定问题出在哪里。我正在引用，并且能够使用changeit和echo函数在.js文件中生成一条警报消息，只是无法排序

您需要将listId作为参数传递给函数，如

onclick=“sortList（'fruits'）；return false；“

并将

文档.getElementbyId（）

更改为

文档.getElementbyId（））

哪一个是打字错误

函数排序列表（listId）{
var list=document.getElementById（listId）；
var children=list.childNodes；
var listItemsHTML=新数组（）；
对于（变量i=0；i”+listItemsHTML[i]+“”；
}
}

单击以


苹果
橙色的
香蕉

您需要将listId作为参数传递给函数，如

onclick=“sortList（'fruits'）；返回false；“

并将

document.getElementbyId（）

更改为

document.getElementbyId（）

，这是一种打字错误

函数排序列表（listId）{
var list=document.getElementById（listId）；
var children=list.childNodes；
var listItemsHTML=新数组（）；
对于（变量i=0；i”+listItemsHTML[i]+“”；
}
}

单击以


苹果
橙色的
香蕉

首先，它是

文档。getElementById

。。。ById中的大写B

其次，使用

list.children

而不是list.childNodes-不需要关心文本节点

第三，在排序列表上使用list.appendChild来移动现有节点，而不是使用innerHTML

function sortList(listId) {
    var list = document.getElementById(listId);
    Array.from(list.children).sort((a, b) => a.textContent > b.textContent).forEach(li => list.appendChild(li));
}

或者，如果您对ES2015不满意+

function sortList(listId) {
    var list = document.getElementById(listId);
    Array.from(list.children).sort(function (a, b) {
        return a.textContent > b.textContent;
    }).forEach(function (li) {
        return list.appendChild(li);
    });
}

最后，改变

<a onclick ="sortList(); return false;" href="#">

到

---

首先，它是

文档。getElementById

。。。ById中的大写B

其次，使用

list.children

而不是list.childNodes-不需要关心文本节点

第三，在排序列表上使用list.appendChild来移动现有节点，而不是使用innerHTML

function sortList(listId) {
    var list = document.getElementById(listId);
    Array.from(list.children).sort((a, b) => a.textContent > b.textContent).forEach(li => list.appendChild(li));
}

或者，如果您对ES2015不满意+

function sortList(listId) {
    var list = document.getElementById(listId);
    Array.from(list.children).sort(function (a, b) {
        return a.textContent > b.textContent;
    }).forEach(function (li) {
        return list.appendChild(li);
    });
}

最后，改变

<a onclick ="sortList(); return false;" href="#">

到

---

我知道它已经得到了回答，但我考虑过提供一些不同的版本

• 使用

  按钮

  而不是
  ，使用“href=”#不是一个好做法

• 从不从字符串创建元素。始终使用

  document.createElement

  。更好

• 为触发函数编写单独的侦听器。不要用HTML本身编写。一旦应用程序增长，管理起来就会更加困难

HTML

<p>click to <button class="sort">sort</button></p>
<ul id="fruits">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

单击进行排序


苹果
橙色的
香蕉

JavaScript

<script type="text/javascript">
    function sortList() {
        var fruitCollection = [],
            fruitsDOM = document.querySelector('#fruits'),
            fruitsLists = document.querySelectorAll('li');

        fruitsLists.forEach(function(item) {
            fruitCollection.push(item.textContent);
        });
        fruitCollection.sort();
        fruitsDOM.innerHTML = null;
        fruitCollection.forEach(function(item) {
            var newNode = document.createElement('li');
            newNode.textContent = item;
            fruitsDOM.appendChild(newNode);
        });
    }
    document.querySelector('.sort').addEventListener('click', sortList);
</script>

函数sortList（）{
var集合=[]，
水果dom=document.querySelector（“#水果”），
水果列表=document.querySelectorAll（'li'）；
水果列表。forEach（功能（项目）{
push（item.textContent）；
});
sort（）；
fruitsDOM.innerHTML=null；
FructureCollection.forEach（功能（项目）{
var newNode=document.createElement（'li'）；
newNode.textContent=项目；
exportsDom.appendChild（newNode）；
});
}
document.querySelector（'.sort'）。addEventListener（'click'，sortList'）；

我知道它已经得到了回答，但我考虑过提供一些不同的版本

• 使用

  按钮

  而不是
  ，使用“href=”#不是一个好做法

• 从不从字符串创建元素。始终使用

  document.createElement

  。更好

• 为触发函数编写单独的侦听器。不要用HTML本身编写。一旦应用程序增长，管理起来就会更加困难

HTML

<p>click to <button class="sort">sort</button></p>
<ul id="fruits">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

单击进行排序


苹果
橙色的
香蕉

JavaScript

<script type="text/javascript">
    function sortList() {
        var fruitCollection = [],
            fruitsDOM = document.querySelector('#fruits'),
            fruitsLists = document.querySelectorAll('li');

        fruitsLists.forEach(function(item) {
            fruitCollection.push(item.textContent);
        });
        fruitCollection.sort();
        fruitsDOM.innerHTML = null;
        fruitCollection.forEach(function(item) {
            var newNode = document.createElement('li');
            newNode.textContent = item;
            fruitsDOM.appendChild(newNode);
        });
    }
    document.querySelector('.sort').addEventListener('click', sortList);
</script>

函数sortList（）{
var集合=[]，
水果dom=document.querySelector（“#水果”），
水果列表=document.querySelectorAll（'li'）；
水果列表。forEach（功能（项目）{
push（item.textContent）；
});
sort（）；
果酱