Html jQuery 索引返回不正确的结果

发布于07月20日

我有一个编号为li's的ul，其中包含一个img标签和一个p标签，我正在try 查找点击时li的索引，如下所示:

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

<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>

但当我点击时，我会得到奇数，我已经判断了功能，它 Select 了li.

我try Select 父li并记录它的索引，但得到的索引不正确.

推荐答案

有时你点击的是<li>，有时你点击的是元素within和<li>.这将改变e.target是什么，从而改变.parent()指的是什么.(在堆栈代码段中，通过单击文本和单击项目符号可以观察到差异.)

不使用.parent()，而使用.closest('li').这样，逻辑就会始终查看指数的<li>:

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

<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>