Question

I’m using jQuery and wanting to target the nth <li> in a list after clicking the nth link.

<ul id='targetedArea'>   <li></li>   <li></li>   <li></li>   <li></li> </ul> <div id='clickedItems'>   <a></a>   <a></a>   <a></a>   <a></a> </div> 

I can target them individually, but I know there must be a faster way by passing which <a> element I clicked on.

$('#clickedItem a:eq(2)').click(function() {   $('#targetedArea:eq(2)').addClass('active');   return false; }); 

Cheers,
Steve

Answer 1

how about something like this:

$('#clickedItems a').click(function() { // figure out what position this element is in    var n = $('#clickedItems a').index($(this) ); // update the targetedArea    $('#targetedArea li:eq('+n+')').html('updated!');    return false; }); 

assuming a 1:1 relationship between your <a> and <li> elements it will update the appropriate <li>