使用 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>