Après avoir cliqué sur le nième élément, comment manipuler un autre élément?

Question

J'utilise jQuery et je veux cibler le nième <li> dans une liste après avoir cliqué sur le nième lien.

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

Je peux les cibler individuellement, mais je sais que par le passage il doit y avoir un moyen plus rapide qui < un élément > je cliqué.

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

Cheers,
Steve

Answer 1

que diriez-vous quelque chose comme ceci:

$('#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; 
}); 

l'hypothèse d'une relation 1: 1 entre vos éléments <a> et <li> il mettra à jour le <li> approprié

Answer 2

Je sais que cela ne vous répond pas directement r question, mais peut-être que vous le rendez plus difficile que c'est.

Attribuez un ID à chacun des éléments A et LI et créez les ID de façon à pouvoir les déduire l'un de l'autre. Dès qu'un A est cliqué, vous connaissez immédiatement l'ID du LI et pouvez vous y référer directement.

Comme effet secondaire, ceci est plus efficace que n'importe quel jQuery intelligent qui pourrait faire la même chose.

Answer 3

Je ne sais pas si jquery a quelque chose comme ça dans Mootools

$$('a.clickedItems').addEvent('click', function(e){ 
    e.preventDefault(); 
    $('targetedArea').getChildren()[this.getAllPrevious().length].addClass('selected'); 
}); 

Answer 4

$('#clickedItems a').click(function() { 
    // you probably want to turn off the currently active one 
    $('#targetedArea li.active').removeClass("active"); 

    // count the links previous to this one and make the corresponding li active 
    $('#targetedArea li:eq(' + $(this).prevAll('a').length + ')').addClass("active"); 

    // prevent the browser from going to the link 
    return false; 
});