jquery - attraversa l'albero e trova elementi con classe specificata

Question

Ho pensato che la funzione closer() avrebbe fatto questo per me, ma apparentemente no. Ho il seguente markup e voglio aggiungere una classe a tutte le ancore genitore con il grilletto classe:

<ul> 
    <li class="selected"> 
     <a class="trigger" href=""></a> 
     <a href=""></a> 
     <ul> 
     <li class="selected"> 
      <a class="trigger" href=""></a> 
      <a href="" id = "my_target"></a> 
     </li> 
     </ul> 
    </li> 
    </ul> 

voglio selezionare il mio obiettivo - in questo esempio, l'ancora più profondo, quindi aggiungere una classe per ciascuno un .trigger nei suoi ascendenti. Quale sarebbe il modo migliore per farlo? Grazie.

Answer 1

Ecco un esempio utilizzando una combinazione di jQuery.parents() (per ottenere i contenenti <li> tag) e poi jQuery.children() per ottenere i <a> tag con una classe di grilletto:

$(document).ready(function() { 
    $('#my_target').click(function(e) { 
     $(this).parents('li.selected').children('a.trigger').addClass('myclass'); 
     e.preventDefault(); 
    }); 
}); 

jsfiddle example

EDIT :

Nota $().parents() attraversa tutto l'albero, ma $().children() attraversa solo un livello. Per raccogliere tutti i discendenti di un elemento utilizzare $().find().

Answer 2

si desidera utilizzare

$('#my_target').parents('a.trigger'); 

Utilizzando il metodo .parents (che attraversa tutta la strada fino l'albero del DOM, piuttosto che .parent, che attraversa un solo livello alto.

Answer 3

parents viene utilizzato per l'attraversamento . up

credo che questo dovrebbe funzionare:

$('#my_target').parents('.trigger').addClass('myclass'); 

Tuttavia, per i fratelli è necessario utilizzare siblings anziché parents Ad esempio il tag anchor che è con l'ancoraggio #my_target è considerato un fratello.