Объединить список чисел в список с помощью .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;

}

Поэтому я пытаюсь для l oop циклически перебирать список и заменять каждый из продуктов на себя, но с номером списка перед их тоже "." В том же самом l oop я увеличиваю номер списка. У меня проблема в том, чтобы заставить его заменить сам текст, мне кажется, что я довольно близко, но я не чувствую, что правильно использую firstChild.nodeValue.

Любой помощь была бы отличной. Спасибо!

Answer 1

Предложение с использованием карты отличное, мое предложение для начинающих:

const list = document.getElementsByTagName('li');
let arrLi = [].slice.call(list);

for (const [i, v] of arrLi.entries()) {
  v.innerHTML = `${i+1} ${v.innerHTML}` 
}

Answer 2

Без использования 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 вы можете l oop по всем элементам списка и установить их свойство innerHTML, используя индекс внутри map функция

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