jquery - jquery多个字符conunting没有指定id

Question

我有 Jquery 字符计数，我需要它在当前输入之后的下一个 div 上回显而不使用 id。

因此，如果我有很多输入，我只需要输入 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>

Answer 1

.next()只选择下一个兄弟，如果它是 adiv所以它没有为inputs 选择任何东西（下一个是<br />）。您可以使用.nextAll()and.first()来获取下一个div.

您还可以通过预先计算长度来稍微简化代码。

jsFiddle

$(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);
        });
});

Answer 2

使用.nextAll('div').first(). 这里的问题是<br />您的 div 和输入元素之间有一个。

您也可以使用.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()

Answer 3

next只选择所选元素的下一个直接兄弟，在这种情况下是一个br元素，您应该调用该next方法 2 次。

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

或者：

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

http://jsfiddle.net/g743q/