javascript - 使用 vanilla javascript 添加与类名匹配的增量数据属性

Question

我正在尝试将增量数据属性设置为具有通用类名的一系列 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，我不知道如何让它使用类似 a 的东西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.

接受任何建议。

标签： javascriptforeachcustom-data-attribute

Answer 1

您可以.forEach()直接从返回的NodeList调用querySelectorAll()

a的第一个参数.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>