本文详解为何直接使用 e.target.parent().index() 会导致 jQuery 索引计算错误，并推荐使用 closest('li') 替代 parent()，确保无论点击 <li> 本身还是其子元素（如 <img> 或 <p>），都能稳定、准确地获取目标 <li> 在父 <ul> 中的正确索引。
本文详解为何直接使用 `e.target.parent().index()` 会导致 jquery 索引计算错误，并推荐使用 `closest('li')` 替代 `parent()`，确保无论点击 `
`），都能稳定、准确地获取目标 `
- ` 中的正确索引。
在 jQuery 事件处理中，e.target 始终指向实际被点击的 DOM 元素，而非绑定事件的元素（即事件委托链中的“当前触发者”）。当为 <li> 绑定点击事件时，看似所有点击都发生在 <li> 上，但实际上用户可能点击的是 <li> 内部的 <img>、<p>，甚至空白区域——这些子元素都会成为 e.target。此时调用 $(e.target).parent() 会返回其直接父元素：若点击 <p>，则 parent() 是 <li>；但若点击 <li> 自身，则 parent() 变成了 <ul>，而 $('ul').index() 永远返回 -1（因 <ul> 不在兄弟元素集合中），导致索引结果混乱、不可预测。
✅ 正确做法是：忽略层级深度，向上查找最近的 <li> 祖先元素。jQuery 的 .closest(selector) 方法正是为此设计——它从 e.target 开始，逐级向上遍历 DOM 树（包含自身），返回第一个匹配选择器的祖先元素（含自身）。无论点击 <img>、<p> 还是 <li>，$(e.target).closest('li') 都能精准定位到目标 <li> 元素，进而通过 .index() 获取其在同级 <li> 中的正确零基索引。
以下是修正后的完整示例代码：
<script src="/uploads/20260314/177344917169b4afd33f255.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 $targetLi = $(e.target).closest('li');
const index = $targetLi.index();
console.log(`Clicked item index: ${index}`); // 输出 0, 1 或 2（稳定可靠）
});
</script>⚠️ 注意事项：
- 避免使用 e.currentTarget 直接替代：虽然 e.currentTarget 总是指向绑定事件的 <li> 元素（此时 $(e.currentTarget).index() 也有效），但该方案仅适用于事件直接绑定在 <li> 上的场景；若改用事件委托（如 $('ul').on('click', 'li', ...)），e.currentTarget 将变为 <ul>，失去意义。而 .closest('li') 具有普适性，兼容直接绑定与委托模式。
- 确保选择器精确：.closest('li') 依赖 DOM 结构。若 <li> 内嵌套了其他 <li>（如多级菜单），需配合上下文限定，例如 $(e.target).closest('li', this) 或使用更具体的选择器。
- 性能与可读性兼顾：.closest() 是 jQuery 封装的高效方法，现代浏览器原生也支持 element.closest()，如需轻量化，可直接使用原生写法：$(e.target.closest('li')).index()。
总结：e.target.parent().index() 的不稳定性源于对 DOM 层级关系的过度假设；而 $(e.target).closest('li').index() 以语义化方式表达“找到所属的列表项并取索引”，逻辑清晰、鲁棒性强，是 jQuery 中获取嵌套结构内目标元素索引的标准实践。
