Verfahrgeschwindigkeit td/tr mit jquery engster()

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

Ich habe einige jQuery-Code, der so geht:

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

Wie Sie sehen können, ich versuche char_count_area von text_field in einem ziemlich ineffizient zu erreichen Weise. Es funktioniert, aber es wird verrückt, wenn ich das Tischdesign ein wenig verändere. Ich habe versucht,

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

verwenden, aber es funktioniert nicht (keine Zeichen angezeigt werden).

Wie erreiche ich dies mit closest?

Answer 1

Ich habe Ihren Code etwas aufgeräumt (entfernt die each(), wie es nicht benötigt wird und besser qualifiziert Ihren Selektor. Verwenden nur CSS-Klassen ist nicht bewährte Methode, auch einen Elementnamen angeben wird leistungsfähiger sein).

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

bedenken, dass closest() in jQuery 1.3, hinzugefügt wurde, so, wenn Sie eine ältere Version von jQuery verwenden dann möchten Sie vielleicht

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

verwenden Dies wird in Ordnung sein, solange die <input> bleibt in einem Element in einem <td>, und der nächste <td> ist die mit CSS-Klasse char_count_area

EDIT:

Als Antwort auf deinen Kommentar, hier eine bessere Lösung, die weniger auf DOM-Positionen

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