Как из цикла передать значения нескольким элементам?

Question

[by_steris]

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

<div class="myClass" data="1">
<div class="myClass" data="2">
<div class="myClass" data="3">

Вот код:

let advantageItems = document.querySelectorAll('.advantageMain-item');

    for (let wowDelay = 0.2; wowDelay <= 1.2; wowDelay += 0.2) {
        console.log(wowDelay.toFixed(1));

        advantageItems.forEach(function(advantageItem) {
            advantageItem.setAttribute("data-wow-delay", wowDelay.toFixed(1) + 's');
        })
    }

Подскажите, в чем ошибка)

Answer 1

[Денис]

Проблема текущего кода заключается в том, что ты перезаписываешь значение атрибута data-wow-delay для всех элементов в списке advantageItems NodeList на каждой итерации цикла for, в результате чего все элементы имеют одинаковое значение 1,2 секунды. Чтобы добиться увеличения значений атрибута data-wow-delay для каждого элемента, следует переместить цикл for внутрь функции forEach и присвоить значение текущему элементу в цикле.
Таким образом ты итерируешь каждый элемент в списке узлов advantageItems и присваиваете каждому элементу свое значение wowDelay, используя индекс текущего элемента в цикле.

Comments

[by_steris]

Т.е. я правильно понял, то необходимо сделать так:

let advantageItems = document.querySelectorAll('.advantageMain-item');

    advantageItems.forEach(function (advantageItem) {
        for (let wowDelay = 0.2; wowDelay <= 1.2; wowDelay += 0.2) {
            //console.log(wowDelay.toFixed(1));
            advantageItem.setAttribute("data-wow-delay", wowDelay.toFixed(1) + 's');
        }
    })

Но таким образом присваивается тоже только одно значение