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

sort unordered list of buttons by list.id

本文关键字：列表 排序 按钮 list id 无序      更新时间：2023-09-26

我的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-[delete]
ul-button1-[delete]
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;
}

1.）因为lis（应该排序）有子lis，所以最好按类选择它们（这在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 );
}

另请参见示例。

相关文章：