jQuery - select nth child of a parent when nth child of another parent is clicked

Question

hi,

how can i select the nth child in a set of <div>'s when the nth child in a set of <li>'s is clicked?

HTML below

<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>

for example, when the <a> in the 2nd <li> is clicked, the 2nd <div class="info"> should get selected.

thanks

Answer 1

This should give you a rough idea (untested)

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

I've created a quick demo to show this working: http://jsfiddle.net/Jbgkm/

Answer 2

This works:

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

(sample http://jsfiddle.net/KGQDz/11/)

Answer 3

The solution is simple, tested with your code. Will hide the clicked element. Here you have the working example with more elements http://jsfiddle.net/v2vqm/

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

Explanation, you're iterating through all the existant li a elements available when the script is loaded. And with that iteration you pass the respective index, which we later use to select the correct .info element via the eq(index) method.

Please note that hide() is just for the demonstration.

Related Docs:

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

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