jQuery Index返回不正确的结果[重复]

lztngnrs  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(118)

此问题在此处已有答案

What is the exact difference between currentTarget property and target property in JavaScript?(10个答案)
Difference between e.target and e.currentTarget(10个答案)
14天前关闭
我有一个ul,其中包含一个img标签和一个p标签,我试图在点击时找到li的索引,如下所示:

$("li").on("click", (e) => {
  console.log($(e.target).parent().index());
});

个字符
但是当我点击时,我得到奇数,我检查了功能,它选择了li
我尝试选择父li并记录它的索引,但我得到不正确的索引。

7lrncoxx

7lrncoxx1#

有时你点击<li>,有时你点击<li>中的一个元素。这将改变e.target是什么,因此.parent()指的是什么。(在堆栈代码段中,通过单击文本与点击要点。)
使用.closest('li')代替.parent()。这样,逻辑总是在<li>中查找索引:

$("li").on("click", (e) => {
  console.log($(e.target).closest('li').index());
});

个字符

lh80um4z

lh80um4z2#

目标并不总是你想的那样。有时它是列表项,所以索引将引用它。

$("li").on("click", e => {
  console.log(e.target);
  console.log($(e.target).parent().index());
});
li {
  background: pink;
}

img,
p {
  background: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>
    <img src="">
    <p>Hindu</p>
  </li>
  <li>
    <img src="">
    <p>Muslim</p>
  </li>
  <li>
    <img src="">
    <p>Christian</p>
  </li>
</ul>

相关问题