jQuery - 使用 maxlength 遍历字段元素

Question

我在页面上有几个表单元素，其属性为 maxlength，并希望有一个字符倒计时来提醒用户剩余的字符。我认为这会起作用，但每个计数器跨度都是空的。

以下是元素的示例（其余所有元素的结构都相似）：

<label for="homeTagline">Tagline</label>
<input type="text" name="homeTagline" value="IT'S YOUR LIFE!" maxlength="24" class="maxed" />
<br>
<span class='emphasisTxt'><span class='cntr'></span> characters of 24 remaining</span>

这是我的j查询

$('.maxed').each( function(){
   var ml = parseInt( $(this).attr('maxlength') );
   if( $(this).val().length() == 0){
      $(this).sibling('span.cntr').html(ml);
   } else {
      $(this).sibling('span.cntr').html(ml - $(this).val().length() );
   } // end if
});

Answer 1

我看到三个问题：

1. .length() $(this).val().length()应该是.length.它是String的属性，而不是方法。

2. jQuery没有.sibling方法，它是.siblings，复数形式。

3. span.cntr不是该领域的兄弟姐妹，它实际上是兄弟姐妹的孩子。所以你需要类似$(this).siblings('.emphasisTxt').find('span.cntr')的东西来选择它。

查看 jsfiddle 上的工作版本。

此外，您是否希望在编辑字段时更新跨度（而不仅仅是在页面加载时）？您需要为此设置一个键控侦听器。请澄清。

Answer 2

像这样的事情是你想要实现的吗？

$('.maxed').each(function(){
   var ml     = parseInt( $(this).attr('maxlength') );
   var length = $(this).val().length;
   $(this).nextAll('span:first').find('.cntr').html(ml-length);      
}).keyup(function() {
    var ml     = parseInt( $(this).attr('maxlength') );
    var length = $(this).val().length;
    $(this).nextAll('span:first').find('.cntr').html(ml - length );
});

下面是一个更新的 jsFiddle 示例： http://jsfiddle.net/RtHyX/4/

Answer 3

你的问题是siblings()位。（可能你拼错了）。

siblings()只选择那些元素，即...井。。。同胞。输入字段的同级是label、<br>和<span class="emphasisTxt">。由于span.cntr在后者内部，因此它不再是this的兄弟姐妹。

相反，$(this).siblings('span.emphasisTxt').children('span.cntr')应该施展魔法。

Answer 4

以下是您最初问题的答案： http://jsfiddle.net/kPYqq/你要找的不是兄弟姐妹，而是兄弟姐妹的孩子。长度是字符串的属性，而不是函数，因此请删除 （） 的。

我知道这并不能直接回答您的问题，但它可能是一个有用的选择。我之前曾在一个类似于您要做的网站上使用过这个 jquery 插件：http://nooshu.com/jquery-plug-in-characters-left