如何获取点击的外层<li>位置？排除内部<ul>的<li>计数干扰

嗨，我懂你遇到的问题了——现在的代码会把所有层级的<li>都算进索引里，不管是外层的还是嵌套在内的，导致点击时弹出的索引完全不符合预期。咱们来一步步解决这个问题：

问题根源 #

你当前用的选择器$("#clicked_job li")会匹配<ul id="clicked_job">下面所有层级的<li>元素，包括嵌套在子<ul>里的内层<li>。这时候$(this).index()获取的是当前<li>相对于它自己父级<ul>的索引，而不是你想要的外层<li>在父列表中的位置。

解决方案1：直接绑定外层<li> #

只给#clicked_job的直接子元素<li>绑定点击事件，用CSS子选择器>来精准定位：

$("#clicked_job > li").click(function() {
  var index = $(this).index();
  alert(index);
});

这样一来，只有外层的两个<li>会触发点击事件，index()返回的就是它们在父<ul>中的正确索引（0或1），完全不会被内层元素干扰。

解决方案2：兼容内层元素点击场景 #

如果需要点击外层<li>内部的元素时，也能获取到对应的外层<li>索引，可以结合事件冒泡和closest()方法：

$("#clicked_job li").click(function(e) {
  e.stopPropagation(); // 阻止事件向上冒泡，避免多次触发
  // 找到当前点击元素所属的外层<li>
  var outerLi = $(this).closest("#clicked_job > li");
  if (outerLi.length) {
    var index = outerLi.index();
    alert(index);
  }
});

这个方法的好处是，不管你点击外层<li>本身还是它内部的任何元素，都能正确拿到外层<li>的索引。

顺便修正你的HTML小问题 #

你的原始HTML里嵌套的<ul>没有闭合，这会导致DOM结构异常，可能影响jQuery的选择逻辑。修正后的HTML应该是这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="clicked_job">
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul> <!-- 闭合内层ul -->
  </li>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul> <!-- 闭合内层ul -->
  </li>
</ul>

内容的提问来源于stack exchange，提问作者ahmad mahmoudi