Question

我需要计算textarea中内容的字符，并在下面的特定类中显示它。

我正在使用下面的代码对我不起作用：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $(".messageText").each(function(){
            $(this).next(".messageCharacters").text($(this).val().length);
            $(this).next(".messagePages").text(($(this).val().length / 70).toFixed());
        });
        $(".messageText").keyup(function(){
            $(this).next(".messageCharacters").text($(this).val().length);
            $(this).next(".messagePages").text(($(this).val().length / 70).toFixed());
        });
    });
</script>

<p>
    <textarea name="title1" class="messageText">phrase1</textarea>
    <br /><span class="messageCharacters">0</span> characters - <span class="messagePages">0</span> pages
</p>
<p>
    <textarea name="title2" class="messageText">phrase2</textarea>
    <br /><span class="messageCharacters">0</span> characters - <span class="messagePages">0</span> pages
</p>

我该如何解决？

Answer 1

.messageText旁边的元素是br，因此$(this).next(".messageCharacters")永远不会返回您的元素。

改为使用.nextAll()：

$(this).nextAll(".messageCharacters")

Answer 2

首先，您的$(".messageText").keyup(function(){位于document.ready函数之外，因此DOM解析器不会收集您的.messageText元素。

同样.next()元素为<br>，因此您需要定位父容器或执行.nextAll()之类的内容：

$(function(){  // DOM ready shorthand

  function count() {
    $(this).nextAll(".messageCharacters").text(this.value.length);
    $(this).nextAll(".messagePages").text((this.value.length/70).toFixed());
  }

  $(".messageText").each(count).on("input", count);

});

防止在textarea中使用一个复制粘贴文本（使用鼠标右键单击 - 粘贴），并且您的脚本不执行任何操作，使用.on("input")在textarea值侦听器中注册任何更改。 / p>

另请考虑($(this).val().length/70).toFixed()如果最初34个字符仅在105时使pages=2成为pages=3，那么您将获得{{1}}。所以再次回顾一下这个数学。

<强> jsBin demo

Answer 3

将 $（this）.next 更改为 $（this）.siblings

如何在jQuery中选择元素之后的第一个特定类

3 个答案: