Javascript 如何获取单击的子节点的索引_Javascript

Javascript 如何获取单击的子节点的索引

javascript

Javascript 如何获取单击的子节点的索引,javascript,Javascript,我在一个div容器中有3个span项目，当用户单击任何项目时在容器中，因为div（container）是（item）span元素的父节点。我想点击（item）span元素的索引 “如何获取单击的子节点的索引”实际上非常简单，如果您使用的是jquery，，，那么它很简单 $("span").click(function(){ console.log($(this).index()) }); 或者，如果您使用的是纯javascript，这应该可以完成这项工作 $("span").cl

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

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

实际上非常简单，如果您使用的是jquery，，，那么它很简单

$("span").click(function(){
    console.log($(this).index())
});

或者，如果您使用的是纯javascript，这应该可以完成这项工作

$("span").click(function(){
    console.log(Array.from(this.parentNode.children).indexOf(this));
});

其实很简单,，如果您使用的是jquery，，，那么它很简单

$("span").click(function(){
    console.log($(this).index())
});

或者，如果您使用的是纯javascript，这应该可以完成这项工作

$("span").click(function(){
    console.log(Array.from(this.parentNode.children).indexOf(this));
});

你可以有这样的东西：

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

  console.log(index);
}

逻辑如下：将事件侦听器添加到容器（div，假设您只有span作为子对象，否则您需要筛选

目标

以仅对span作出反应，或者将侦听器添加到每个span），然后从单击的

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

这是更通用的：它提供了对象在类似数组的对象中的位置，因此它不仅适用于节点列表，而且适用于节点列表。另外，您可以传递任意列表

用此函数替换上一个示例，您将得到如下结果：

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

希望有帮助