使用 Javascript 使“無序列表”表現得像“有序列表”

Question

我需要顯示無序列表中每個列表項的數字。 為此，我嘗試將未排序的ul列表標記轉換為有序的ol列表標記（請參閱下面的腳本）。 我需要這樣做是因為我希望每個li標簽都在它旁邊顯示其訂單號。

這是我在 codepen 上找到的我嘗試過的腳本：

var ul = document.getElementsByClassName("productGrid")[0]
var ol = document.createElement("ol");

var li = ul.querySelectorAll('li');
for(var i=0;i<li.length;i++) {
  ol.appendChild(li[i]);
}

setTimeout(function() {
  ul.parentNode.replaceChild(ol,ul);
},1000);

這有效，但正如預期的那樣，它破壞了設置為該ul標簽的“樣式”。 因此，與其將其轉換為實際的ol標簽，不如將其保留為ul並以其他方式顯示數字。

如何使用 JavaScript 找出ul標簽內有多少li ，然后在li標簽內顯示適當的數字（通過類似span標簽的東西）

對此的任何幫助將不勝感激。

Answer 1

您是否考慮過基於純 CSS 的方法？

您可以通過:before偽元素以及counter-reset和counter-increment CSS 屬性在無序列表上實現類似的計數效果，而無需 JavaScript。

以下是演示此技術實際應用的片段：

 .number-list { /* Init your custom counter for children */ counter-reset: number-list-counter; /* Hide point list style */ list-style:none; } .number-list li { position:relative; } .number-list li:before { /* Set content of pseduo element by parent counter and increment the counter */ content: counter(number-list-counter); counter-increment: number-list-counter; /* Offset position of counter pseduo elements */ position:absolute; top:0; left:-2rem; /* Apply some styling to the numbering */ color: red; font-weight:bold; font-size:1.5rem; }

 <ul class="number-list"> <li>Apple</li> <li>Orange</li> <li>Banana</li> <ul>