jQuery - выберите n-й дочерний элемент родительского элемента при щелчке n-го дочернего элемента другого родителя

Question

Как выбрать n-й дочерний элемент в наборе <div>, когда щелкнул n-й дочерний элемент в наборе <li>?

HTML ниже

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

<div class="info"> 
... 
</div> 
<div class="info"> 
... 
</div> 
...... 
<div class="info"> 
... 
</div> 

, например, когда <a> во 2-й <li> щелчке по второй <div class="info"> должен выбран.

благодаря

Answer 1

Это должно дать вам общее представление (непроверенные)

$('ul li').click(function() { 
    var i = $(this).index(); 
    $('.info:eq('+i+')').addClass('selected'); 
    return false; 
});​ 

Я создал быструю демонстрацию, чтобы показать эту работу: http://jsfiddle.net/Jbgkm/

Answer 2

Это работает:

$("li a").click(function(){ 
    $(".info").eq($("li a").index(this)).hide(); 
});​ 

()

Answer 3

Решение прост, протестировано с кодом. Скроет элемент с щелчком. Здесь у вас есть рабочий пример с большим количеством элементов http://jsfiddle.net/v2vqm/

$("ul li a").each(function(index){ 
    $(this).click(function(){ 
    $('.info').eq(index).hide(); 
    }); 
}); 

Объяснения, вы перебором всех несуществующих li a элементов, доступных, когда скрипт загружен. И с этой итерацией вы передаете соответствующий index, который позже мы используем для выбора правильного элемента .info с помощью метода eq(index).

Обратите внимание, что hide() предназначен для демонстрации.

Похожие Docs:

http://api.jquery.com/each/

http://api.jquery.com/eq/