gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:14:52 24 4
gpt4 key购买 nike

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

当我将列表转换为数组时,它会删除按钮并只保留两个 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.) 因为 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 );
}

另见 an example .

关于javascript - 按 list.id 对无序列表的按钮进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9156661/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com