Индекс элемента списка 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.link не 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); 
});