单击内部链接时列表项 ul li 的索引答案

【问题标题】：Index of list item ul li when click on link inside单击内部链接时列表项 ul li 的索引
【发布时间】：2013-05-22 14:34:59
【问题描述】：

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

我知道如何在点击索引号上获得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.link 而不是ul li 的索引。单击特定的a.link 时如何获取li 的索引？

【问题讨论】：

$(this).parent().index();

标签： javascript jquery indexing onclick

【解决方案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);
});

【讨论】：

感谢您的回复，它们都不起作用，在第一种情况下，它始终显示 2 或 3，这与我单击哪个 'code'li'code' 无关。
是的 - 抱歉，我刚刚写了 anwser。因为它适用于表明我的情况不同。毕竟你的anwser很好，帮助我解决了我的问题。谢谢你:)
@SzymonDziewoński 啊，我是这么想的 :) 别担心，随时乐意提供帮助！

【解决方案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);
});

【讨论】：