如何插入按属性值排序的新列表项？

Question

假设我们有一个 HTML 消息列表。 每个项目都有 index-Unix 时间戳，以毫秒为单位。

<ul>
 <li ts="1657744925386">Item 1</li>
 <li ts="1657744941061">Item 2</li>
 <li ts="1657744953364">Item 3</li>
 <li ts="1657744964372">Item 4</li>
 <li ts="1657744973219">Item 5</li>
 <li ts="1657744978450">Item 6</li>
</ul>

然后我们必须插入另一个项目， ts= 1657744950123 。 它应该在第 3 项之后。

考虑到可能有很多页面上的消息，我们不可能每次都遍历所有消息，进行比较？

Answer 1

假设没有表示列表的现有数据结构，我将遍历列表元素，检查属性值，直到找到第一个较大的值。 那就是您要插入的索引 + 1。

如果有一个数据数组，您可以对数组本身执行类似的操作并重新生成列表。

这是前一种方法的一个疯狂的例子。 如果您还需要更新文本节点，您可能需要采用方法 #2 并以编程方式重建列表。

 const list = document.querySelector('ul'); const items = list.querySelectorAll('li'); const newItemVal = 1657744950123; let itemAfterIndex; for (const [index, item] of items.entries()) { const tsVal = parseInt(item.getAttribute('ts')); if (tsVal > newItemVal) { itemAfterIndex = index; break; } } const newItem = document.createElement('li'); newItem.setAttribute('ts', newItemVal); newItem.textContent = 'New item'; const itemAfter = list.querySelectorAll('li')[itemAfterIndex]; list.insertBefore(newItem, itemAfter);

 <ul> <li ts="1657744925386">Item 1</li> <li ts="1657744941061">Item 2</li> <li ts="1657744953364">Item 3</li> <li ts="1657744964372">Item 4</li> <li ts="1657744973219">Item 5</li> <li ts="1657744978450">Item 6</li> </ul>

Answer 2

考虑以下 jQuery 示例。

 $(function() { var myNewItem = $("<li>", { ts: 1657744950123 }).html("Item 7"); $("ul li").each(function(i, el) { console.log($(el).attr("ts"), myNewItem.attr("ts")); if ($(el).attr("ts") > myNewItem.attr("ts")) { myNewItem.insertBefore(el); return false; } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li ts="1657744925386">Item 1</li> <li ts="1657744941061">Item 2</li> <li ts="1657744953364">Item 3</li> <li ts="1657744964372">Item 4</li> <li ts="1657744973219">Item 5</li> <li ts="1657744978450">Item 6</li> </ul>

这假设列表已经排序。 如果没有，您可以在任何地方附加新项目，分离所有项目，对它们进行排序，然后将它们附加回来。

 $(function() { $("<li>", { ts: 1657744950123 }).html("Item 7").appendTo("ul"); var myItems = $("ul li").detach(); myItems.sort(function(a, b) { if ($(a).attr("ts") < $(b).attr("ts")) { return -1; } if ($(a).attr("ts") > $(b).attr("ts")) { return 1; } if ($(a).attr("ts") == $(b).attr("ts")) { return 0; } }); $("ul").append(myItems); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li ts="1657744925386">Item 1</li> <li ts="1657744941061">Item 2</li> <li ts="1657744953364">Item 3</li> <li ts="1657744964372">Item 4</li> <li ts="1657744973219">Item 5</li> <li ts="1657744978450">Item 6</li> </ul>

查看更多： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort