Как получить индекс целевого элемента в этом коде?

Question

Я пытаюсь получить индекс целевого элемента внутри метода forEach - addEventListener. Но получить их не так просто, как я думал раньше.

  let contents = document.querySelectorAll('.contents');
  let table = document.querySelectorAll('.table');
  function eventRegister() {
    contents.forEach((items, idx) => {
      items.addEventListener('mouseenter', (event) => {
        console.log(items[idx]);
        console.log(event.target[idx]);
        console.log(event.currentTarget[idx]);
        console.log(items.index);
        console.log(event.target.index);
        console.log(event.currentTarget.index); // all of those console.log is firing undefined
        if (idx > 4) {
          table.classList.remove('shown');
        } else {
          table.classList.add('shown');
        }
      });
    })
  }

.shown {
  background-color: orange;
}

<div class="box">
  <div class="contents">this</div>
  <div class="contents">is</div>
  <div class="contents">a</div>
  <div class="contents">text</div>
  <div class="contents">group</div>
  <div class="contents">test</div>
</div>
<div class="table">
  <div class="things">a</div>
  <div class="things">b</div>
  <div class="things">c</div>
  <div class="things">d</div>
</div>

Моя цель - получить индекс каждого элемента из contents, а если его индекс больше 4, удалить класс shown из table.

Есть ли способы получить индекс для каждого целевого элемента в методе forEach?

Answer 1

Просто проверьте, больше ли idx чем 4:

let contents = document.querySelectorAll('.contents');
let table = document.querySelector('.table');

function eventRegister() {
  contents.forEach((item, idx) => {
    item.addEventListener('mouseenter', () => {
      if (idx > 4) {
        table.classList.remove('shown');
      } else {
        table.classList.add('shown');
      }
    });
  });
}

eventRegister();

.shown {
  background-color: orange;
}

<div class="box">
  <div class="contents">this</div>
  <div class="contents">is</div>
  <div class="contents">a</div>
  <div class="contents">text</div>
  <div class="contents">group</div>
  <div class="contents">test</div>
</div>
<div class="table">
  <div class="things">a</div>
  <div class="things">b</div>
  <div class="things">c</div>
  <div class="things">d</div>
</div>

Обратите внимание, что первый параметр forEach является текущим итерируемым элементом, поэтому вы, вероятно, должны называть его item, а не items, чтобы не запутаться. (Это не коллекция, это отдельный элемент.)

Вы также можете использовать делегирование событий вместо добавления множества отдельных слушателей:

let contents = document.querySelectorAll('.contents');
let table = document.querySelector('.table');

function eventRegister() {
  const box = document.querySelector('.box');
  box.addEventListener('mouseover', ({ target }) => {
    if (!target.matches('.contents')) {
      return;
    }
    const index = [...box.children].indexOf(target);
    if (index > 4) {
      table.classList.remove('shown');
    } else {
      table.classList.add('shown');
    }
  });
}

eventRegister();

.shown {
  background-color: orange;
}

<div class="box">
  <div class="contents">this</div>
  <div class="contents">is</div>
  <div class="contents">a</div>
  <div class="contents">text</div>
  <div class="contents">group</div>
  <div class="contents">test</div>
</div>
<div class="table">
  <div class="things">a</div>
  <div class="things">b</div>
  <div class="things">c</div>
  <div class="things">d</div>
</div>