javascript - 如何获取点击的子节点的索引

Question

我在 div 容器中有 3 个 span 项目， 当用户单击任何项​​目时 在容器中，因为 div(container) 是 (item) span 元素的父节点。我想获取单击的(item)span 元素的索引。

“如何获取被点击的子节点的索引”

Answer 1

你可以有这样的东西:

document.querySelector("div").onclick = ({target}) => {
  let index = 0;
  while (target = target.previousElementSibling) {
    index++;
  }

  console.log(index);
}

逻辑如下:您向容器(div，假设您只有 span 作为子级，否则您需要过滤 target 以仅对 span 使用react)添加一个事件监听器，或将监听器添加到每个跨度)，然后从单击的 span 中获取前一个同级元素，直到没有任何同级元素 - 因此您到达容器的第一个子元素 - 并且您返回迭代计数。

另一种方法可能是:

const getIndex = (target, list) =>
  Array.prototype.indexOf.call(list, target)

const div = document.querySelector("div");
const span = div.querySelectorAll("span");

console.log(getIndex(span[1], span)) // 1

这更通用:它为您提供了类似数组的对象中对象的位置，因此它适用于 NodeList，但不仅限于此。另外，您可以传递任意列表。

用此函数替换前面的示例，您将得到如下内容:

document.querySelector("div").onclick = ({target}) => {
  console.log(getIndex(target, target.parentNode.children));
}

希望对你有帮助!