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

次のようなjQueryコードがあります。

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

ご覧のとおり、かなり非効率な方法でchar_count_areaから到達しようとしています。text_fieldそれは機能しますが、テーブルのデザインを少し変更するとおかしくなります。使ってみました

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

動作しません（文字が表示されません）。

を使用してこれを達成するにはどうすればよいclosestですか?

4

1 に答える 1

8

私はあなたのコードをいくらか整理しました（each()不要なため削除し、セレクターをより適切に修飾しました。CSS クラスだけを使用することはベスト プラクティスではありません。要素名も指定するとパフォーマンスが向上します）。

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

closest()jQuery 1.3 で追加されたので、古いバージョンの jQuery を使用している場合は、

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

<input>が a の要素に残っている限り、これは問題ありません<td>。次<td>は CSS クラスの要素です。char_count_area

編集：

あなたのコメントに応えて、DOMの位置にあまり依存しないより良い解決策があります

('input.text_field').keyup(function(){                                 
    $(this).parents('tr:first').find('td.char_count_area').html(remainingChars);
});
于 2009-10-14T11:06:28.637 に答える