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标签的“样式”。因此，除了将其转换为实际的ol标记之外，我需要将其保留为ul并以其他方式显示数字。

如何使用JavaScript找出li标记内有多少ul，然后在li标记内显示适当的数字（通过类似{{ 1}}标签）

任何对此的帮助将不胜感激。

Answer 1

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

通过{ "error": { "root_cause": [ { "type": "sql_illegal_argument_exception", "reason": "Does not know how to convert argument Mul[] for function Sum[]" } ], "type": "sql_illegal_argument_exception", "reason": "Does not know how to convert argument Mul[] for function Sum[]" }, "status": 500 }伪元素以及counter-reset和counter-increment CSS属性，无需JavaScript就可以对无序列表实现类似的计数效果。

以下是演示此技术的摘要：

:before

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

使用Javascript使“无序列表”的行为类似于“有序列表”

1 个答案: