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

Question

我有一个项目列表，我需要创建一个函数，将数字放在列表中每个项目的前面。所以"pine nuts"，会变成“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 中的 counters 可以轻松设置样式，例如

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}` 
}

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

Concatenate a list of numbers into a list with .innerHTML

javascript

replace

list

innerhtml

nodes