Добавление атрибута html-элементу через JS

Question

у меня в html есть 4 одинаковых элемента figure.

Вопрос - как с помощью JS присвоить первому из них атрибут data-wow-delay="0.25s", второму - data-wow-delay="0.5s", третьему data-wow-delay="0.75s" и 4-му data-wow-delay="1s" соответственно? Так понимаю, нужен setAttribute, но как выбрать первый, второй элемент, etc?

Answer 1

ну я сделал, конечно страшным костылём, учитывая незнание JS ))) вот так:

   const cards = document.querySelectorAll('.partners__card');
    for (var i = 0, length = cards.length ; i < length; i++) { 
    cards[0].setAttribute('data-wow-delay', `0.25s`);
    cards[1].setAttribute('data-wow-delay', `0.5s`);
    cards[2].setAttribute('data-wow-delay', `0.75s`);
    cards[3].setAttribute('data-wow-delay', `1s`);
    }

Но хочется сделать нормально )

Answer 2

  const figures = document.querySelectorAll('figure');

  let delay = 0;
  figures.forEach(figure => {
    figure.dataset.wowDelay = `${delay += 0.25}s`;
  })

БЛОГ НА HUSL

Добавление атрибута html-элементу через JS

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