使用 Javascript 使"Un-ordered list"表现得像个"ordered list"

Question

我需要显示无序列表中每个列表项的数字。为了实现这一点，我尝试将无序ul列表标签转换为有序ol列表标签(请参阅下面的脚本(。我需要这样做，因为我希望每个li标签在其旁边显示其订单号。

这是我在代码笔上找到的尝试过的脚本：

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>