使用.innerHTML将一个数字列表连接到一个列表中

Question

我有一个项目列表，我需要创建一个函数，在列表中的每个项目前面加一个数字。所以"松子"，就变成了"2"。松子

这是我传递的列表(带有参数ulPassed(-

<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four" class="cold">balsamic vinegar</li>
<li id="five" class="cold">yoghurt coated banana chips</li>

这是我到目前为止的代码-

function swapInnerHTML(ulPassed){
ulPassed = ulPassed.innerHTML;
var grocList = document.getElementById('groceries');
var listItems = grocList.getElementsByTagName('li');
var listNumber = 1;
var count = 0;
for (count = 0; count < ulPassed.length; count++) {
var thisItem = listItems[count].getAttribute('class');      //pointing towards each class item
var foodText = thisItem.firstChild.nodeValue;   //pointing towards the child node of each item
foodText = foodText.replace(foodText, listNumber+". "+foodText); //replace the text
thisItem.firstChild.nodeValue = foodText; //update the text
listNumber++; //next list number
}
console.log(ulPassed);
return ulPassed;

}

因此，我尝试了一个for循环来循环浏览列表，并将每一种食物都替换为自己，但前面有一个列表编号，也是一个"。在同一个循环中，我正在增加列表编号。我遇到的问题是让它替换文本本身，我觉得我很接近，但我觉得我没有正确使用firstChild.nodeValue。

任何帮助都会很棒。谢谢

Answer 1

在不使用Javascript的情况下，您可以使用有序列表<ol>而不是无序列表<ul>，尤其是如果这样做只是为了视觉目的。此外，CSS中的计数器可以很容易地设置样式，例如

ul {
counter-reset: food 0;
}
li::before {
counter-increment: food;
content: counter(food) ". "; 
}

<ul>
<li class="hot"><em>fresh</em> figs</li>
<li class="hot">pine nuts</li>
<li class="hot">honey</li>
<li class="cold">balsamic vinegar</li>
<li class="cold">yoghurt coated banana chips</li>
</ul>

---

否则，在Javascript中，您可以循环遍历所有列表项，并使用map函数中的索引设置其innerHTML属性

[...document.querySelectorAll('li')].map((food, i) => 
food.innerHTML = [++i, food.innerHTML].join('. ')  
);

<ul>
<li class="hot"><em>fresh</em> figs</li>
<li class="hot">pine nuts</li>
<li class="hot">honey</li>
<li class="cold">balsamic vinegar</li>
<li class="cold">yoghurt coated banana chips</li>
</ul>

Answer 2

使用地图的建议很棒，我的建议是针对更初学者的：

const list = document.getElementsByTagName('li');
let arrLi = [].slice.call(list);
for (const [i, v] of arrLi.entries()) {
v.innerHTML = `${i+1} ${v.innerHTML}` 
}