jQuery trova il genitore più alto TD

Question

Sto lavorando a un codice per un modulo contenuto in una tabella. Sto scrivendo (con jQuery) una funzione per evidenziare il genitore <td> di ogni elemento <input>. Quella parte è semplice - il codice è solo:

$('.myForm input').click(function(){ 
    $(this).parent().addClass('active'); 
    }) 

La parte più complicata è che alcuni campi di testo sono all'interno di una seconda tabella inserita all'interno di una <td> della prima tabella. Sarebbe simile:

<table> 
    <tr> 
     <td> <--cell I want to add the class to 
      <table> 
       <tr> 
        <td><input type='text'></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Quindi la mia domanda è questa: c'è un modo per utilizzare una dichiarazione jQuery per trovare la massima genitore <td> dell'elemento <input>? Quindi, in altre parole, posso combinare:

$('.myForm input').click(function(){ 
    $(this).parent().addClass('active'); 
    }) 

e

$('.myForm input').click(function(){ 
    $(this).parent().parent().addClass('active'); 
    }) 

in una funzione?

Answer 1

La soluzione migliore è aggiungere una classe alla tabella che si desidera effettivamente targetizzare. Ciò significa che è possibile aggiornare il markup in futuro senza necessariamente interrompere il JS, facendo qualcosa come $(this).closest('.targetElement').addClass('active').

Se si non è possibile fare ciò, è possibile utilizzare parents('td').last(). Seleziona tutti gli elementi parent td e poi ottiene l'ultimo.

$('.myForm input').click(function(){ 
    $(this).parents('td').last().addClass('active'); 
}) 

consultare il manuale jQuery:

• closest
• parents
• last

Answer 2

provare a fare questo:

$('.myForm input').click(function(){ 
    $(this).parents('td').last().addClass('active'); 
}) 

Answer 3

Io suggerirei di provare:

$(this).parents("td").last() 

troverà tutti gli antenati di cella tabella dell'elemento corrente. L'ultimo dovrebbe contenere l'elemento della cella della tabella di livello più alto.

Answer 4

si può provare:

$(this).parents('td:last'); 

o

$(this).parents('td').last(); 

Answer 5

Lascia la tua top-level Element TD un nome di classe:

<table> 
    <tr> 
     <td class="topTD"> <--cell I want to add the class to 
      <table> 
       <tr> 
        <td><input type='text'></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 


$('.myForm input').click(function(){ 
    $(this).closest('td.topTD').addClass('active'); 
}); 

Answer 6

rapida & sporco :)

$(this).parents('td')[--$(this).parents('td').length]