如何使用Vanilla JS获取被点击li元素的序号

没问题，这事儿用原生JS其实挺简单的，给你分享几种实用的实现方式，按需选择就行：

方法一：事件委托（推荐，支持动态列表） #

这种方法只给父级ul绑定一次点击事件，不管列表是静态还是后续动态添加的项，都能正常工作，还能节省内存开销。

// 获取列表容器
const listContainer = document.querySelector('ul');

listContainer.addEventListener('click', function(e) {
  // 先找到被点击的列表项（如果点击的是li内部的子元素，用closest确保拿到li）
  const clickedItem = e.target.closest('li');
  
  if (clickedItem) {
    // 将ul的子元素转为数组，找到当前li的索引，加1得到序号（因为索引从0开始）
    const itemIndex = Array.from(this.children).indexOf(clickedItem) + 1;
    console.log(itemIndex); // 点击Three就输出3
  }
});

为什么推荐这个？ #

• 不用给每个li单独绑定事件，性能更好
• 后续通过JS动态添加的li，不需要重新绑定事件，自动生效
• 用closest('li')兼容了li内部有嵌套元素的情况（比如li里有<span>或<strong>）

方法二：给每个列表项单独绑定事件（适合静态列表） #

如果你的列表是固定不变的，也可以直接遍历所有li，给每个绑定点击事件：

// 获取所有li元素
const listItems = document.querySelectorAll('li');

// 遍历每个li，绑定点击事件
listItems.forEach((item, index) => {
  item.addEventListener('click', function() {
    // 索引从0开始，加1就是我们要的序号
    console.log(index + 1);
  });
});

注意事项 #

• 这种方式的缺点是：如果之后通过JS新增了li元素，新添加的项不会有点击事件，需要重新执行绑定逻辑。

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