javascript - 单击内部链接时列表项 ul li 的索引

Question

我在这里阅读了很多关于获取索引值的问题。

我知道如何获得li点击索引号。但是，我需要li在单击其中的链接时获取该值。

<ul>
   <li><a class=link href="#"></a></li>
   <li><a class=link href="#"></a></li>
   <li><a class=link href="#"></a></li>
   <li><a class=link href="#"></a></li>
</ul>


$("li a.link").click(function(e) {
    var i = $(this).index();
       alert(i)
});

它不起作用，因为它需要a.linknot的索引ul li。如何获取单击li特定a.link对象时的索引？

Answer 1

您可以使用 jQuery 的parent()选择器来定位单击的锚链接的父元素的索引。

在这种情况下，它将是：$(this).parent().index();。

$("li a.link").click(function(e) {
    var i = $(this).parent().index();
    alert(i);
});

如果你想得到物理数字（例如第一个返回一个，第二个返回两个），你只需在选择器中添加一个：

$("li a.link").click(function(e) {
    var i = $(this).parent().index() + 1;
    alert(i);
});

Answer 2

您可以采用两种方法：计算单击的 li 在哪个位置，或预先编号。第二个效率更高（点击的恒定时间）：

var li_elems = $('li.link'),
    i = 0,
    len = li_elems.length;

for (; i < len; i++) {
   li_elems[i].attr('index', i);
}

$('ul').on('click', 'li.link', function (e) {
  var index = this.getAttribute('index');
  alert(index);
});