Traversant td/tr avec le plus proche de jquery()

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;"/> 

J'ai un code jQuery qui va comme ceci: Comme vous pouvez le voir

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

, je suis en train d'atteindre char_count_area de text_field d'une manière assez inefficace manière. Cela fonctionne, mais il devient fou si je modifie légèrement le design de la table. J'ai essayé d'utiliser

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

mais il ne fonctionne pas (les caractères ne semblent pas).

Comment puis-je y parvenir en utilisant closest?

Answer 1

J'ai corrigé un peu le code (en supprimant le each() car il n'est pas nécessaire et mieux qualifié votre sélecteur.Utiliser uniquement des classes CSS n'est pas une bonne pratique, en spécifiant un nom d'élément aussi sera plus performant).

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

garder à l'esprit que closest() a été ajouté dans jQuery 1.3, si vous utilisez une ancienne version de jQuery, vous pouvez utiliser

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

Ce sera bien, aussi longtemps que le <input> reste dans un élément dans un <td>, et le suivant <td> est celui avec classe CSS char_count_area

EDIT:

En réponse à votre commentaire, voici une meilleure solution qui repose moins sur les positions DOM

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