如何在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旁边的元素是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（使用鼠标右键- 粘贴 ）内的一个拷贝pasteing文字和脚本无所作为使用.on("input")注册textarea的价值监听器里的任何变化。

还考虑一下($(this).val().length/70).toFixed()如果最初34个字符使它的pages=2仅在105时您将获得pages=3 。 因此，请再次审查该数学。

jsBin演示

Answer 3

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