Могу ли я создать цикл для изменения содержимого элементов коллекции js?

Question

Js

listElem = document.querySelectorAll('.list__item');

listElem[0].innerHTML = `One`;
listElem[1].innerHTML = `Two`;
listElem[2].innerHTML = `Three`;

HTML

  <ul class="list">
        <li class="list__item">Пункт1</li>
        <li class="list__item">Пункт2</li>
        <li class="list__item">Пункт3</li>
    </ul>

Answer 1

Ваш пример не совсем подходит для циклов, потому что в нём присваиваются значения, которые невозможно автоматизировать в цикле. Но вот простой пример, где это возможно:

listElems = document.querySelectorAll('.list__item');

let counter = 1;

for (const listElem of listElems) {
  listElem.innerHTML =  counter++;
}

<ul class="list">
  <li class="list__item">Пункт1</li>
  <li class="list__item">Пункт2</li>
  <li class="list__item">Пункт3</li>
</ul>

Answer 2

Вот один из вариантов, пример:

listElems = document.querySelectorAll('.list__item');

newValues = ['One', 'Two', 'Three'];

for (const key in listElems) {
  listElems[key].innerHTML =  newValues[key];
}

Answer 3

Попробуйте так:

document.querySelectorAll('.list__item').forEach((element, index) => {
   element.innerHTML = "new text " + index
})

БЛОГ НА HUSL

Могу ли я создать цикл для изменения содержимого элементов коллекции js?

Ответы (3 шт):