Durchqueren td/tr mit jquery nächsten()

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

Habe ich einige jQuery-code, der geht so:

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

Wie Sie sehen können, bin ich versucht zu erreichen char_count_area aus text_field in eine eher ineffiziente Art und Weise.
Es funktioniert, aber es geht verrückt, wenn ich ändern Sie die Tabelle design leicht.
Ich habe versucht, mit

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

aber es funktioniert nicht (Zeichen werden nicht angezeigt).

Wie kann ich erreichen, das mit closest ?

InformationsquelleAutor rashcroft3 | 2009-10-14
  1. 7

    Habe ich aufgeräumt deinen code etwas (entfernt die each() da es nicht gebraucht wird und besser qualifiziert Ihre Auswahl. Mit nur CSS-Klassen ist nicht best practice, die Angabe eines Elementnamens zu sein, wird auch performant).

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

    beachten Sie, dass nächsten() wurde Hinzugefügt, jQuery 1.3, so dass, wenn Sie eine ältere version von jQuery, dann möchten Sie vielleicht zu verwenden

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

    Diese wird in Ordnung sein, so lange wie die <input> bleibt ein element in einem <td>, und die nächste <td> ist das mit der CSS-Klasse char_count_area

    EDIT:

    In der Antwort zu Ihrem Kommentar, hier ist eine bessere Lösung, die sich weniger auf DOM-Positionen

    ('input.text_field').keyup(function(){                                 
    $(this).parents('tr:first').find('td.char_count_area').html(remainingChars);
});
    • ok, danke. ein Thema - gelegentlich habe ich ein anderes <td> VOR char_count_area, also next(); nie erreicht char_count_area, würde ich als Nächstes().next().. ich bin der Hoffnung, verwenden Sie die gleiche javascript-code ist universell. Dies ist der Grund, warum ich versuchte, konkret zu benennen, die nächstgelegene".char_count_area', dann lieber irgendwelche 'td'. Keine Hilfe?
    InformationsquelleAutor Russ Cam
Schreibe einen Kommentar