2

私はJqueryの文字数を数えており、idを使用せずに現在の入力の後の次のdivでエコーする必要があります。

したがって、大量の入力がある場合は、class=word_count を入力するだけで済み、それぞれに追加の ID を作成する必要はありません。

http://jsfiddle.net/tbj8y/

$(document).ready(function() {  
    $('.word_count')
        .on('input keyup keydown focus', function () {
            var maxlength = $(this).attr('maxlength');
            var value = $(this).val();

            if(value.length > 0) {
                $(this).next('div').text((maxlength - $(this).val().length));
            } else {
                $(this).next('div').text(maxlength);
            }   
    });
});

<input type="text" class="word_count" maxLength="100" /><br />
<div></div><br />
<input type="text" class="word_count" maxLength="150" /><br />
<div></div><br />
<textarea class="word_count" maxlength="50"></textarea>
<div></div>
4

3 に答える 3

3

.next()次の兄弟が の場合にのみ選択divされるため、inputs に対しては何も選択されません (次は です<br />)。とを使用.nextAll()し.first()て、次の を取得できますdiv。

また、長さを事前に計算することで、コードを少し簡素化できます。

jsフィドル

$(document).ready(function() {  
    $('.word_count')
        .on('input keyup keydown focus', function () {
            var maxlength = $(this).attr('maxlength');
            var value = $(this).val();
            var length = Math.max(0, maxlength - value.length);
            $(this).nextAll('div').first().text(length);
        });
});
于 2013-05-07T03:52:08.913 に答える
1

を使用し.nextAll('div').first()ます。ここでの問題は<br />、div と入力要素の間に a があることです。

も使用できます.nextUntil('div').next()。したがって、これらのセレクターの間に複数の要素を追加しても、それは処理されます。(別の div ではありません)。

<br />それを機能させる別の方法は、タグを避けdisplay:blockて要素に使用することです

デモ

$(document).ready(function () {
    $('.word_count')
        .on('input keyup keydown focus', function () {

        var maxlength = $(this).attr('maxlength');
        var value = $(this).val();

        if (value.length > 0) {
            $(this).nextAll('div').first().text((maxlength - $(this).val().length));
        } else {
            $(this).nextAll('div').first().text(maxlength);
        }
    });
});

.nextAll()

.nextUntil()

于 2013-05-07T03:49:36.297 に答える
1

next選択した要素 (この場合は要素) の次の直接の兄弟のみを選択するため、メソッドを 2 回br呼び出す必要があります。next

$(this).next().next('div').text((maxlength - $(this).val().length));

または：

$(this.nextElementSibling).next('div').text(maxlength - this.value.length);

http://jsfiddle.net/g743q/

于 2013-05-07T03:49:56.440 に答える