Question

我有一个html列表，当单击其子元素时，我需要获取索引li。

我有这个：

<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
</ul>

在其他情况下，我会使用

$('li').click(function() {
$(this).index();
});

但是在这种情况下，我需要在单击a时获得li索引，所以我尝试：

$('li a').click(function() {
$(li).index();
});

我期望li索引，但在console.log上只能得到0

Answer 1

获取点击的anchor标签的父级，并从lis数组中找到它的索引。

$('li a').click(function() {
  const lis = $('li');
  const index = lis.index($(this).parent());
  console.log(index);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a>item 1</a></li>
  <li><a>item 2</a></li>
  <li><a>item 3</a></li>
</ul>

Answer 2

您可以在jquery中使用.closest()（如果某些a不是li的直接子代，否则.parent()就可以了）。

演示：

$('li a').click(function() {
  console.log($(this).closest('li').index());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
</ul>

Answer 3

您可以尝试使用parent

$('li a').click(function() {
  console.log($(this).parent().index());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a>item 1</a></li>
  <li><a>item 2</a></li>
  <li><a>item 3</a></li>
</ul>

如果单击子元素，则使用jQuery获取索引<li>

3 个答案: