Question

我在下面的代码中遇到了一些麻烦：

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>

使用Javascript：

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>";
    }
}

然而，当我尝试单击链接来排序html什么都不做，我不知道是什么问题。我正在引用并且能够使用changeit和echo函数在.js文件中生成警报消息，但不能排序

Answer 1

您需要将listId作为onclick ="sortList('fruits'); return false;"之类的参数传递给函数，并将document.getElementbyId()更改为document.getElementById()这是一个错字

＆＃13;

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);
        }
    }
    console.log(listItemsHTML);
    listItemsHTML.sort();
    list.innerHTML="";
    for (var i = 0; i < listItemsHTML.length; i++) {
        list.innerHTML += "<li>" + listItemsHTML[i] + "</li>";
    }
}

＆＃13;

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

＆＃13;

Answer 2

首先，它是document.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="#">

到

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

Answer 3

我知道它已经回答了，但想到提供的版本不同。

使用<a>代替document.createElement，使用'href ='＃'不是一个好习惯。
永远不要从字符串创建元素。始终使用<p>click to <button class="sort">sort</button></p> <ul id="fruits"> <li>apple</li> <li>orange</li> <li>banana</li> </ul>。它更好！
为触发函数编写单独的侦听器。不要用HTML本身写。一旦应用程序增长，就很难管理。

<强> HTML

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

<强>的JavaScript

MyClass

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

3 个答案: