按 list.id 对无序列表的按钮进行排序

Question

我的 html5、css、javascript 程序将是日历。单击某个事件的按钮将显示该事件的详细信息。现在，我已经按照输入顺序记录了一天的事件。我一直试图根据按钮的 id 对无序列表进行排序。在这里您可以看到每个 ul 按钮是如何创建的。值来自索引数据库。

  function renderTodo(row) {
    var todos = document.getElementById("todoItems");
    var li1 = document.createElement("li");
    var name = document.createTextNode(row.name);
    var li2 = document.createElement("li");
    var time = document.createTextNode(row.time);
    var btn = document.createElement("BUTTON")
    var a = document.createElement("a");
    var li = document.createElement("li");

    a.addEventListener("click", function() {
      helicopter.indexedDB.deleteEvent(row.timeStamp);
    }, false);

    a.textContent = " [Delete]";
    li1.appendChild(name);
    li2.appendChild(time);
    btn.onclick=viewEvent;
    btn.id=row.parent;
    btn.row = row;
    btn.appendChild(li1);
    btn.appendChild(li2);
    li.appendChild(btn);
    li.appendChild(a);
    li.id = row.time;
    todos.appendChild(li)
    sortUnorderedList(todos);
  }

换句话说，成品看起来像这样。
ul-button2-[删除]
ul-button1-[删除]
ul-button3-[delete]

当我将列表转换为数组时，它会删除按钮并只保留两个 li 值。我尝试了一些方法但没有成功（见下文）。我应该放弃按钮的想法，只使用 CSS 来提供相同的外观，还是有一个好的方法来对按钮进行排序。

  function sortUnorderedList(ul) {
      //if(typeof ul == "string")
        //ul = document.getElementById(ul);

      // Idiot-proof, remove if you want
      if(!ul) {
        alert("The UL object is null!");
        return;
      }

      // Get the list items and setup an array for sorting
      var lis = ul.getElementsByTagName("LI");
      var ali = Array.lis;
      ali.sort(liSort);
      ul.innerHTML = "";

      // Populate the array
      for(var i = 0, j = lis.length; i < 2; i++)
        ul.appendChild(ali[i]);

      // Sort it
      //vals.sort(liSort);
      //vals.reverse();

      // Change the list on the page
      //for(var i = 0, l = lis.length; i < l; i++)
        //lis[i].innerHTML = vals[i];
    }
function liSort(one, two) {
    //alert(one.id + " - " two.id);
    return one.id - two.id;
}

Answer 1

1.) 因为li（应该排序）有子li，所以最好按类选择它们（这在html5中可用）；因此，在 li.id = row.time; 之后添加一个包含以下行的类：

li.className = 'sortLi';

2.) 在函数中选择它们并将列表转换为数组：

var lis = ul.getElementsByClassName("sortLi");
var ali = Array.prototype.slice.call(lis);

3.) 现在按排序顺序附加它们：

ali.sort(liSort);
for (var i = 0; i < ali.length; i++) {
    ul.appendChild(ali[i]);
}

4.) 排序函数：

function liSort(one, two) {
    return one.id < two.id ? -1 : ( one.id > two.id ? 1 : 0 );
}

另请参阅示例。