2

Не могу понять как работает forEach или необходимо использовать что-то другое. Подскажите, пожалуйста, нужно в список из <li> добавить значения из массива.

<ul>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
</ul>

Array:

[
0: "The Matrix Resurrections"
1: "The Matrix"
2: "Sexual Matrix"
3: "Matrix"
4: "The Matrix Reloaded"
5: "Before I Fall"
6: "Sex and the Matrix"
7: "The Matrix Revolutions"
8: "アミテージ・ザ・サード DUAL-MATRIX"]

JS:

 titlesColl = document.querySelectorAll('.title')
    titles.forEach(function (title) {
      titlesColl.forEach(el => {
        el.innerHTML = title
      })
    });

2 ответа 2

3

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

const titles = [
  "The Matrix Resurrections",
  "The Matrix",
  "Sexual Matrix",
  "Matrix",
  "The Matrix Reloaded",
  "Before I Fall",
  "Sex and the Matrix",
  "The Matrix Revolutions",
  "アミテージ・ザ・サード DUAL-MATRIX",
];

const titlesColl = document.querySelectorAll('.title');

titlesColl.forEach(function (el, index) {
  el.innerHTML = titles[index];
});
<ul>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
</ul>

2

const items = [
  "The Matrix Resurrections",
  "The Matrix",
  "Sexual Matrix",
  "Matrix",
  "The Matrix Reloaded",
  "Before I Fall",
  "Sex and the Matrix",
  "The Matrix Revolutions",
  "アミテージ・ザ・サード DUAL-MATRIX",
];

const list = document.querySelector('ul');
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  list.appendChild(li);
});
<ul></ul>

А если прям-таки обязательно уже существующие <li> заполнять, то

const items = [/*...*/];
[...document.querySelectorAll('ul li')].forEach(
  (li, idx) => li.textContent = items[idx] || 'Упс, нет такого элемента в массиве'
);
2
  • В последнем случае можно обойтись без конвертации в массив: NodeList.prototype.forEach() 1 июл 2021 в 15:09
  • 1
    @vsemozhebuty, верно, можно - данное действие не обязательно. Но если скрипты собираются без полифиллов (только транспайлинг), и при этом нужен IE, то реструктуризация нодлиста в массив обеспечит поддержку этого унылого браузера.
    – yar85
    1 июл 2021 в 15:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.