我需要在未排序列表显示数字,每个列表项。要做到这一点,我想一个未有序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
标签)显示span
标签内的适当数量
任何帮助,将不胜感激。
你有没有考虑一个纯CSS基础的方法呢?
你可以实现不通过:before
伪元素需要JavaScript的无序列表上的类似计数的效果,以及counter-reset
和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>