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

Question

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

这是我试过的脚本 I found on 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 标签设置的“样式”。因此，我需要将其保留为 ul 并以其他方式显示数字，而不是将其变成实际的 ol 标签。

我如何使用 JavaScript 找出 ul 标签内有多少 li，然后在 li 内显示相应的数字> 标签(通过类似于 span 标签的东西)

如有任何帮助，我们将不胜感激。

Answer 1

您是否考虑过采用基于纯 CSS 的方法？

您可以通过 :before 伪元素和 counter-reset 在无序列表上实现类似的计数效果，而无需 JavaScript。和 counter-increment CSS 属性。

下面是演示此技术实际应用的片段:

.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>