Как добавить класс элементам, значение определённого атрибута которых присутствует в массиве?

Question

[fuckingawesomenigga]

Имеется массив: const arr = [ 'qwe', 'asd', 'zxc' ];.

И элементы:

<div data-i="qwe"></div>
<div data-i="rty"></div>
<div data-i="fgh"></div>
<div data-i="asd"></div>
<div data-i="zxc"></div>
<div data-i="iop"></div>

Как добавить класс элементам, у которых значение data-i присутствует в массиве?

Answer 1

[0xD34F]

const attrName = 'data-i';
const attrValues = [ 'qwe', 'asd', 'zxc' ];
const className = 'класс';

Просто добавить класс:

document
  .querySelectorAll(attrValues.map(n => `[${attrName}="${n}"]`))
  .forEach(n => n.classList.add(className));

Или, если также надо у неподходящих элементов класс удалить:

document.querySelectorAll(`[${attrName}]`).forEach(n => {
  n.classList.toggle(className, attrValues.includes(n.getAttribute(attrName)));
});