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

Question

[intriga93]

https://jsfiddle.net/shc24g83/

Answer 1

[Александр]

document.querySelectorAll('[data-block="road"]').length;

Comments

[intriga93]

Александр, это работает в одном случае
а я пробую, вместо подставить переменную check
но ожидаемо не подставится https://jsfiddle.net/shc24g83/4/

[Александр]

intriga93,

let check = event.target.dataset.block;
console.log(document.querySelectorAll(`.wrap [data-block="${check}"]`).length);

Answer 2

[0xD34F]

Где находятся кликаемые элементы; где находятся элементы, которые надо посчитать; каким data-атрибутом задаётся связь между элементами:

const buttons = document.querySelector('.content');
const blocks = document.querySelector('.wrap');
const dataAttr = 'block';

Считаем:

buttons.addEventListener('click', e => {
  const block = e.target.dataset[dataAttr];
  if (block) {
    console.log(blocks.querySelectorAll(`:scope > [data-${dataAttr}="${block}"]`).length);
  }
});

или

const onClick = ({ target: { attributes: { ['data-' + dataAttr]: { value } } } }) =>
  console.log(Array.prototype.reduce.call(
    blocks.children,
    (acc, n) => acc + (n.getAttribute('data-'.concat(dataAttr)) === value),
    0
  ));

for (const n of buttons.children) {
  n.addEventListener('click', onClick);
}