如何实现点击li元素时获取其相对父元素的索引？附代码片段

我来帮你搞定这个需求！你现在的代码里其实有个常见的闭包坑，而且后续的计数逻辑也没写完，下面给你梳理问题并提供几种靠谱的实现方式：

首先先贴出你的代码片段方便参考：

window.onload = function() { 
  var allTags = document.getElementsByTagName("li"); 
  for (var i = 0; i < allTags.length; i++) { 
    allTags[i].addEventListener("click", function() { 
      var x = event.target; 
      var parent = x.parentElement; 
      console.log("Parent " + parent.innerHTML); 
      var count = 0; 
      console.log("Parent text is " + parent.innerHTML)...
    });
  }
}

问题分析 #

你这段代码里的核心问题是用var声明了循环变量i——因为var是函数级作用域，所有点击事件回调会共享同一个i变量，等你实际点击li的时候，循环早就跑完了，i已经变成了allTags.length，根本拿不到当前li的正确索引。

另外如果li内部有子元素，event.target可能会指向子元素而非li本身，也会导致后续计算出错。

解决方案 #

方法1：用let声明循环变量（ES6+ 最简洁）

let是块级作用域，每次循环都会创建一个独立的i变量，完美解决闭包问题：

window.onload = function() { 
  const allTags = document.getElementsByTagName("li"); 
  // 用let声明i，每个循环迭代都有独立的i
  for (let i = 0; i < allTags.length; i++) { 
    allTags[i].addEventListener("click", function() { 
      console.log("当前li相对于父元素的索引：", i);
    });
  }
}

方法2：转数组后用forEach遍历

把getElementsByTagName返回的HTMLCollection转成数组，用forEach遍历自带的索引参数，逻辑更清晰：

window.onload = function() { 
  const allTags = Array.from(document.getElementsByTagName("li")); 
  allTags.forEach((liItem, index) => {
    liItem.addEventListener("click", () => {
      console.log("当前li相对于父元素的索引：", index);
    });
  });
}

方法3：点击时动态计算索引（兼容旧浏览器）

如果需要兼容ES6之前的环境，可以在点击时通过父元素的子元素列表动态计算索引，同时用event.currentTarget确保拿到绑定事件的li元素：

window.onload = function() { 
  var allTags = document.getElementsByTagName("li"); 
  for (var i = 0; i < allTags.length; i++) { 
    allTags[i].addEventListener("click", function(event) { 
      // currentTarget始终指向绑定事件的元素，避免target指向子元素
      const currentLi = event.currentTarget;
      const parent = currentLi.parentElement;
      // 把父元素的children转成数组后查找索引
      const index = Array.prototype.indexOf.call(parent.children, currentLi);
      console.log("当前li相对于父元素的索引：", index);
    });
  }
}

内容的提问来源于stack exchange，提问作者saim2025