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

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 key = 'i';
const attr = `data-${key}`;
const values = [ 'qwe', 'asd', 'zxc' ];
const className = 'класс';

Просто добавляем класс кому надо:

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

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

for (const n of document.querySelectorAll(`[${attr}]`)) {
  n.classList.toggle(className, values.includes(n.dataset[key]));
}