添加增量数据属性匹配 class 名称与香草 javascript

Question

我正在尝试将增量数据属性设置为具有共同 class 名称的一系列 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.

出错了

接受任何建议。

Answer 1

您可以直接从 NodeList returned from querySelectorAll()

调用 .forEach()

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>

添加增量数据属性匹配 class 名称与香草 javascript

Add incremental data attribute matching class names with vanilla javascript

javascript

foreach

custom-data-attribute