Question

这是我尝试排序的HTML元素

    <div id="notStarted-tasks">
  <div id="K1512844566066" class="row">
    <div class="span4 offset4 alert alert-warning" style="margin: auto; display: table;"><span style="font-size: 170%">Breakfast</span>
      <button href="#" type="button" class="btn btn-warning">Start</button>
    </div>
  </div>
  <div id="I1512844569230" class="row">
    <div class="span4 offset4 alert alert-warning" style="margin: auto; display: table;"><span style="font-size: 170%">dinner</span>
      <button href="#" type="button" class="btn btn-warning">Start</button>
    </div>
  </div>
</div>

这是我在javascript中的排序函数，在第一个＆＃34; if＆＃34;阻止我只是在列表为空时返回。在第二个＆＃34;如果＆＃34;我正在进行一种降序排列，并在＆＃34;其他＆＃34;提升排序。

const todoSort = () =>{
    if(notStartedElement.length==0)
            return;
    if(todoCurrent=="asc"){
        document.getElementById("todoSort").setAttribute("src","src/image/desc.png");
        todoCurrent="desc";
        const ele = document.getElementById("notStarted-tasks");
        const divEle = ele.getElementsByClassName("row");
        divEle.sort(function(a,b){
            let spana = a.getElementsByTagName("span")[0];
            let spanb = b.getElementsByTagName("span")[0];
            return spana.innerHTML == spanb.innerHTML? 0 : (spana.innerHTML > spanb.innerHTML ? -1 : 1);
        });
        ele.innerHTML="";
        for(let i = 0;i<divEle.length;i++)
            ele.appendChild(divEle[i]);
    }
    else{
        document.getElementById("todoSort").setAttribute("src","src/image/asc.png");
        todoCurrent="asc";
        const ele = document.getElementById("notStarted-tasks");
        const divEle = ele.getElementsByClassName("row");
        divEle.sort(function(a,b){
            let spana = a.getElementsByTagName("span")[0];
            let spanb = b.getElementsByTagName("span")[0];
            return spana.innerHTML == spanb.innerHTML? 0 : (spana.innerHTML > spanb.innerHTML ? 1 : -1);
        });
        ele.innerHTML="";
        for(let i = 0;i<divEle.length;i++)
            ele.appendChild(divEle[i]);
    }
}

当我点击我的排序按钮时，我收到此消息＆＃34; Uncaught TypeError：divEle.sort不是函数＆＃34;。我需要这只在javascript中完成，我不允许使用jquery。所以，有人能指出我在这里做错了什么吗？谢谢

Answer 1

getElementsByClassName返回HTMLCollection，您需要Array才能使用排序。

你可以轻松地将它变成这样的数组：

var collection = document.getElementsByClassName("some-class");
var array = [];
for (var x = 0; x < collection.length; x++) {
    array.push(collection[x]);
}
array.sort(...);

无法使用javascript对div元素进行排序

1 个答案: