如何在此代码中获取目标元素的索引？答案

【问题标题】：How to get the index of targeted element in this code?如何在此代码中获取目标元素的索引？
【发布时间】：2019-05-04 20:25:19
【问题描述】：

我试图在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，则从table 中删除类shown。

有没有什么方法可以获取forEach 方法中每个目标元素的索引？

【问题讨论】：

标签： javascript html loops indexing foreach

【解决方案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>

【讨论】：