Как мне воспользоваться двумя массивами одновременно методом ForEach

Рейтинг: 0Ответов: 1Опубликовано: 25.04.2023

Первый массив состоит из переменных

const item1 = document.querySelector(".item_1");
const item2 = document.querySelector(".item_2");
const item3 = document.querySelector(".item_3");
const item4 = document.querySelector(".item_4");
const item5 = document.querySelector(".item_5");
const item6 = document.querySelector(".item_6");
const item7 = document.querySelector(".item_7");
const item8 = document.querySelector(".item_8");
const item9 = document.querySelector(".item_9");
const item10 = document.querySelector(".item_10");
items = [item1, item2,...,item10]

Второй массив состоит из строк, так же количество элементов 10 как и в первом массиве

textArr = ['Палка', 'Окно',...,'Шкаф']

Как перебрать эти массивы так чтоб получить всем div добавился текст c 2 массива начиная первого элемента текста в первый div(item1), второй элемент текста в второй div(item2) и так далее до 10 div(item10). Пробовал метод ForEach и получился такой код:

items.forEach((elem)) => {
  elem.innerHTML = textArr (Так он выведет всем 10 div все элементы, второго массива)
})

Был еще такой вариант:

items.forEach((elem)) => {
  let text = ''
  textArr.forEach((i)=>{
     text = i
  })
  elem.innerHTML = text (Так он выведет всем 10 div, последнего элемента второго массива('Шкаф'))
})

Результатом чтоб получалось так:

<div class='item_1'>Палка</div>
<div class='item_2'>Окно</div>
,...,
<div class='item_10'>Шкаф</div>
javascript foreach
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

В методе forEach в аргументе callbackFn вторым аргументом передаётся index. Т.к. количество элементов одинаково и тексты во втором массиве стоят уже в нужном порядке, то можно использовать index, чтобы достать нужные элементы у обоих массивов:

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const arr2 = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

arr1.forEach((elem, index) => arr1[index] += arr2[index]);

console.log(arr1);