Question

我ul有两个内li。我想获得第一个li的位置但它会计算所有li

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

<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>
  </li>
  <li>
    <ul>
      <li></li>
      <li></li>
    <ul>
  </li>
</ul>

Answer 1

使用e.stopPropagation();停止触发父li事件。通过这种方式，您的代码可以正常工作，只需一个警报即可为内部li提供正确的索引。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="clicked_job">
  <li>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
</ul>

event.stopPropagation（）方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。

Answer 2

首先，您的HTML无效。您缺少几个结束标记，而是打开了新标记。

其次，由于您已嵌套li标记，因此需要在引发的事件上调用stopPropagation()以阻止事件冒泡DOM。试试这个：

$("#clicked_job li").click(function(e) {  
  e.stopPropagation();
  var index = $(this).index();
  console.log(index);
});

<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>
  </li>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

如何检查点击<li>与另一个内部ul </li> <li>的位置

2 个答案: