Как задать класс элементам с одинаковыми порядковыми номерами?

Question

[damarkuzz]

Есть два блока, внутри них - много span, каждый - с новой строки. Как сделать, чтобы при наведении на любой из span задавался класс hovered ему и span с таким же порядковым номером в соседнем блоке?

Comments

[WbICHA]

На каком этапе возникает проблема?

Answer 1

[0xD34F]

const cols = document.querySelectorAll('.col');

cols.forEach(n => {
  n.addEventListener('mouseover', onHover);
  n.addEventListener('mouseout', onHover);
});

function onHover(e) {
  const index = [...this.children].findIndex(n => n.contains(e.target));
  if (index !== -1) {
    const t = e.type === 'mouseover';
    cols.forEach(n => n.children[index].classList.toggle('hovered', t));
  }
}