本文详解为何直接用 $(e.target).parent().index() 会导致 jQuery 索引错乱，并推荐使用 closest('li') 替代 parent()，确保无论点击 <li> 自身还是其内部子元素（如 <img> 或 <p>），都能稳定获取正确的父级 <li> 索引。
本文详解为何直接用 `$(e.target).parent().index()` 会导致 jquery 索引错乱，并推荐使用 `closest('li')` 替代 `parent()`，确保无论点击 `
`），都能稳定获取正确的父级 `
在 jQuery 事件处理中，e.target 始终指向实际被点击的 DOM 元素，而非事件绑定的目标元素。例如，当为 <li> 绑定点击事件时，若用户点击的是 <li> 内部的 <p> 或 <img> 标签，则 e.target 就是该 <p> 或 <img>，而非 <li>。此时调用 $(e.target).parent() 会返回其直接父元素——虽然通常也是 <li>，但一旦 HTML 结构稍有变化（如嵌套 <span>、添加容器 <div>），parent() 就可能跳过目标 <li>，导致 .index() 计算出错。
更关键的是：.index() 方法在无参数调用时，会返回当前 jQuery 对象在其同级兄弟元素中的位置索引（从 0 开始）。若 $(e.target).parent() 返回了错误的父节点（比如某个中间 <div>），其兄弟节点就不再是 <li> 列表，索引自然失效。
✅ 正确做法是使用 .closest('li')：
它从 e.target 开始向上遍历 DOM 树，严格查找最近的匹配 <li> 祖先元素（含自身），语义明确、结构鲁棒，不受内部嵌套影响。
以下是修正后的完整示例：
<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（即当前 <li> 元素）。建议改用标准函数表达式 function(e)，或直接使用 $(this).index()（更简洁高效）：
$("li").on("click", function(e) { console.log($(this).index()); // 推荐：语义清晰、性能更优 }); -
事件委托场景下仍适用：若 <li> 是动态生成的，应将事件委托给静态父容器（如 <ul>），并配合 closest()：
$("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() 在直接绑定到 <li> 时更为简洁可靠——二者皆优于脆弱的 parent() 链式调用。
