jQuery find padre superior TD

Question

Estoy trabajando en un código para un formulario contenido en una tabla. Estoy escribiendo (con jQuery) una función para resaltar el elemento principal <td> de cada elemento <input>. Esa parte es simple - el código es simplemente:

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

La parte más complicada es que algunos campos de texto están en el interior de una segunda tabla anidada dentro de una <td> de la primera tabla. Que se vería así:

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

Así que mi pregunta es la siguiente: ¿hay una manera de utilizar una instrucción jQuery para encontrar la más alta de los padres <td> del elemento <input>? Así, en otras palabras, puedo combinar:

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

y

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

en una sola función?

Answer 1

La mejor solución es agregar una clase a la tabla que realmente desea orientar. Esto significa que puede actualizar el marcado en el futuro sin romper necesariamente el JS, haciendo algo como $(this).closest('.targetElement').addClass('active').

Si no se puede hacer eso, puede usar parents('td').last(). Esto selecciona todos los elementos principales td y luego obtiene el último.

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

Consulte el manual de jQuery:

• closest
• parents
• last

Answer 2

Trate de hacer esto:

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

Answer 3

yo sugeriría tratando:

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

encontrará todos los antepasados ​​de celda de tabla del elemento actual. El último debe contener el elemento de celda de tabla de más alto nivel.

Answer 4

que puede probar:

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

o

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

Answer 5

Dele a su alto nivel de elemento td un nombre de clase:

<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

rápida & sucia :)

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