如何使用JavaScript获取被点击<li>元素的索引（监听场景）

API 探路者

2026-5-19

获取点击

元素的索引（JavaScript实现）

嘿，这里有几种实用的方法帮你用JavaScript获取点击<li>元素的索引，你可以根据自己的场景来选择：

方法一：事件委托+数组索引查找（推荐，支持动态元素）

这种方法通过给父<ul>绑定事件（事件委托），不管是静态还是后续动态添加的<li>都能生效，性能也更优。

假设你的HTML结构是这样的：

<ul id="myList">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

对应的JavaScript代码：

// 获取父ul元素
const listContainer = document.getElementById('myList');

// 给父元素绑定点击事件
listContainer.addEventListener('click', function(e) {
  // 确保点击的目标是li元素（避免点击到ul的空白区域）
  if (e.target.tagName === 'LI') {
    // 将父元素的子元素（所有li）转成数组
    const allItems = Array.from(this.children);
    // 找到当前点击元素在数组中的索引
    const clickedIndex = allItems.indexOf(e.target);
    console.log('你点击的li索引是:', clickedIndex);
    // 这里可以添加你需要的业务逻辑，比如根据索引做操作
  }
});

方法二：遍历绑定事件（适合静态列表）

如果你的列表是静态的（不会动态添加/删除

），可以直接给每个

单独绑定点击事件，利用forEach的第二个参数直接拿到索引：

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

// 遍历每个li，绑定点击事件
listItems.forEach((item, index) => {
  item.addEventListener('click', function() {
    console.log('你点击的li索引是:', index);
  });
});

方法三：利用data属性存储索引

你也可以在HTML里预先给每个

设置data-index属性，点击时直接读取这个值：

HTML结构：

<ul id="myList">
  <li data-index="0">列表项1</li>
  <li data-index="1">列表项2</li>
  <li data-index="2">列表项3</li>
</ul>

JavaScript代码：

const listContainer = document.getElementById('myList');

listContainer.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    // 读取data-index属性，并转成数字类型
    const clickedIndex = parseInt(e.target.dataset.index);
    console.log('你点击的li索引是:', clickedIndex);
  }
});

如果是动态添加

，记得在创建元素时给它设置对应的data-index值哦~

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

如何使用JavaScript获取被点击<li>元素的索引（监听场景）

方法一：事件委托+数组索引查找 （推荐，支持动态元素） #

方法二：遍历绑定事件（适合静态列表） #

方法三：利用data属性存储索引 #

HTML结构： #

JavaScript代码： #

方法一：事件委托+数组索引查找（推荐，支持动态元素）

方法二：遍历绑定事件（适合静态列表）

方法三：利用data属性存储索引

HTML结构：

JavaScript代码：