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

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").keyup(function(){在document.ready之外函数，因此你的 .messageText DOM 解析器不收集元素。

还有 .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);

});

为了防止在您的文本区域内复制粘贴文本(使用鼠标右键单击 - 粘贴)而您的脚本什么都不做，请使用 .on("input")在 textarea 值监听器中注册任何更改。

也想想($(this).val().length/70).toFixed()如果最初的 34 个字符使它成为 pages=2只有在 105 你会得到 pages=3 .因此，请再次复习该数学。

jsBin demo