jQuery 中使用 e.target 获取点击元素索引的正确方法-html教程-PHP中文网

本文详解为何直接用 $(e.target).parent().index() 会导致 jQuery 索引错乱，并推荐使用 closest('li') 替代 parent()，确保无论点击自身还是其内部子元素（如或），都能稳定获取正确的父级索引。

本文详解为何直接用 `$(e.target).parent().index()` 会导致 jquery 索引错乱，并推荐使用 `closest('li')` 替代 `parent()`，确保无论点击 `

` 自身还是其内部子元素（如 ` jQuery 中使用 e.target 获取点击元素索引的正确方法

` 或 `

`），都能稳定获取正确的父级 `

` 索引。

在 jQuery 事件处理中，e.target 始终指向实际被点击的 DOM 元素，而非事件绑定的目标元素。例如，当为

绑定点击事件时，若用户点击的是

内部的

或 jQuery 中使用 e.target 获取点击元素索引的正确方法标签，则 e.target 就是该

或 jQuery 中使用 e.target 获取点击元素索引的正确方法，而非

。此时调用 $(e.target).parent() 会返回其直接父元素——虽然通常也是

，但一旦 HTML 结构稍有变化（如嵌套、添加容器

），parent() 就可能跳过目标

，导致 .index() 计算出错。

更关键的是：.index() 方法在无参数调用时，会返回当前 jQuery 对象在其同级兄弟元素中的位置索引（从 0 开始）。若 $(e.target).parent() 返回了错误的父节点（比如某个中间

），其兄弟节点就不再是

列表，索引自然失效。

✅ 正确做法是使用 .closest('li')：
它从 e.target 开始向上遍历 DOM 树，严格查找最近的匹配

祖先元素（含自身）

，语义明确、结构鲁棒，不受内部嵌套影响。

以下是修正后的完整示例：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

<script src="/uploads/20260314/177345026469b4b418c8c7b.jpg"></script>
<ul>
    <li>
        <img src="icon1.png" alt="Hindu">
        <p>Hindu</p>
    </li>
    <li>
        <img src="icon2.png" alt="Muslim">
        <p>Muslim</p>
    </li>
    <li>
        <img src="icon3.png" alt="Christian">
        <p>Christian</p>
    </li>
</ul>

<script>
$("li").on("click", function(e) {
    const liIndex = $(e.target).closest('li').index();
    console.log("Clicked item index:", liIndex); // 始终输出 0, 1 或 2
});
</script>

? 注意事项：

避免使用箭头函数 => 绑定 this：原问题中使用了 (e) => { ... }，虽不影响 e.target，但会丢失 jQuery 默认为事件处理器设置的 this（即当前
元素）。建议改用标准函数表达式 function(e)，或直接使用 $(this).index()（更简洁高效）：
```
$("li").on("click", function(e) {
    console.log($(this).index()); // 推荐：语义清晰、性能更优
});
```
事件委托场景下仍适用：若

是动态生成的，应将事件委托给静态父容器（如

$("ul").on("click", "li", function(e) {
    console.log($(this).index()); // this 仍指向被点击的 <li>
});

兼容性提示：.closest() 在 jQuery 1.3+ 中已支持，现代项目无需顾虑；纯 JavaScript 可用 e.target.closest('li') 替代。

总结：e.target 的不确定性要求我们主动“定位目标容器”，而非依赖层级假设。.closest('li') 是语义化、健壮且可读性强的最佳实践；而 $(this).index() 在直接绑定到

时更为简洁可靠——二者皆优于脆弱的 parent() 链式调用。