無法使用JavaScript對div元素進行排序

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中的排序函數，如果列表為空，則在第一個“ if”塊中返回。 在第二個“ if”中，我進行降序排序，而在“ else”中進行升序排序。

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]);
    }
}

當我單擊排序按鈕時，我收到此消息“未捕獲的TypeError：divEle.sort不是函數”。 而且我需要僅在javascript中完成此操作，並且不允許使用jquery。 那么，有人可以指出我在這里做錯了什么嗎？ 謝謝

Answer 1

getElementsByClassName返回HTMLCollection ，您需要一個Array才能使用sort。

您可以輕松地將其放入這樣的數組中：

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