Добавить инкрементный атрибут данных, соответствующий именам классов, с vanilla javascript - PullRequest
Новая
       30

Добавить инкрементный атрибут данных, соответствующий именам классов, с vanilla javascript

0 голосов
/ 29 января 2020

Я пытаюсь установить атрибут инкрементных данных для серии div с общим именем класса.

Например, у меня есть эти div: 

<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>

И что я Я пытаюсь сделать что-то вроде этого: 

<div class="field__item" data-foo="1">Test</div>
<div class="field__item" data-foo="2">Test</div>
<div class="field__item" data-foo="3">Test</div>
<div class="field__item" data-foo="4">Test</div>
<div class="field__item" data-foo="5">Test</div>
<div class="field__item" data-foo="6">Test</div>
<div class="field__item" data-foo="7">Test</div>
<div class="field__item" data-foo="8">Test</div>

Я делал что-то вроде этого: 

const el = document.querySelector('.field__item');
let a = 1;
el.setAttribute('data-foo', (a++));

Но это только устанавливает первый div, и я не уверен как заставить его использовать что-то вроде forEach, чтобы установить этот атрибут данных для всех них. Я пытался это: 

const item = document.querySelectorAll(".field__item");
Array.prototype.forEach.call(item, function(elements, index) {
  let a = 1;
  item.setAttribute("data-foo", a++);
});

Но это ошибки с item.setAttribute is not a function.

Открыт для любых предложений.

1 Ответ

2 голосов
/ 29 января 2020

Вы можете вызвать .forEach() непосредственно из NodeList , возвращенного из querySelectorAll()

Первый параметр .forEach() является текущим элементом, и вторым параметром является текущий индекс 

const item = document.querySelectorAll(".field__item");

item.forEach((element, index) => {
  element.setAttribute('data-foo', index);
});

// Just to demo the data change
item.forEach(element => console.log(element.getAttribute('data-foo')));
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
<div class="field__item">Test</div>
...