Question

我的html5，css，javascript程序将是日历。单击事件按钮将显示该事件的详细信息。现在，按照输入的顺序，我有几天的事件。我试图根据他们的id对无序的按钮列表进行排序。在这里，您可以看到每个ul按钮的创建方式。值来自indexedDB。

  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- [删除]

当我将列表转换为数组时，它会删除按钮并仅保留两个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 s（应该排序）具有子li s，所以最好按类选择它们（可以使用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 );
}

另见an example。

按list.id排序无序的按钮列表

1 个答案: