desplazamiento td/tr con jQuery más cercano()

Question

<td width="162"><span class="required">*</span> Name:</td> 
<td width="407"> 
    <label> 
     <input id="store_name" class="text_field alnum" type="text" minlength="3" 
     maxlength="30" size="40" name="store_name" style="color: rgb(51, 51, 51);"/> 
    </label> 
</td> 
<td class="char_count_area" style="color: green;"/> 

Tengo algo de código jQuery que dice así:

$('.text_field').each(function(){ 
     $(this).keyup(function(){     
      $(this).parent().parent().parent().find('.char_count_area').html(remainingChars); 
.... 

Como se puede ver, estoy tratando de llegar a char_count_area de text_field de una forma bastante ineficaz manera. Funciona, pero se vuelve loco si alterno ligeramente el diseño de la mesa. He intentado usar

$(this).closest('.char_count_area').html(remainingChars) 

pero no funciona (no aparecen caracteres).

¿Cómo puedo lograr esto usando closest?

Answer 1

He ordenado un poco tu código (eliminé el each() ya que no es necesario y mejor califiqué tu selector. Usar solo clases CSS no es una buena práctica, especificar el nombre de un elemento también será más efectivo).

$('input.text_field').keyup(function(){         
    $(this).closest('td').next().html(remainingChars); 
}); 

tener en cuenta que closest() se añadió en jQuery 1.3, por lo que si usted está utilizando una versión anterior de jQuery entonces es posible que desee utilizar

$('input.text_field').keyup(function(){         
    $(this).parent().parent().next().html(remainingChars); 
}); 

Esto va a estar bien, siempre y cuando la <input> permanece en un elemento en un <td>, y el siguiente <td> es el que tiene la clase CSS char_count_area

EDIT:

En respuesta a tu comentario, aquí es una mejor solución que se basa menos en DOM posiciona

('input.text_field').keyup(function(){         
    $(this).parents('tr:first').find('td.char_count_area').html(remainingChars); 
});