如何使用jQuery选择相邻的元素？

Question

我有两个 <textarea> 和两个 <h4>，同时我有一个用于计算文本框中字符数的函数，并将该数字打印在 <h4> 中。

现在我的问题是：字符数取决于两个 <textarea>。我希望每个计数器都基于其自己的 <textarea>。如何操作？

 var cmnt_length_color = ["#999", "#9b764f", "#9b764f", "#cf7721", "#cf7721", "#fe7a15", "#fe7a15", "#fe7a15", "#ea532b", "#ea532b"];

$("body").on('input', 'textarea', function() {
        el = $(this);
        var textarea_cmnt_id =  $(this).attr('id');
     var textarea_cmnt_pure_id = textarea_cmnt_id.replace(/[^0-9]/g, '');
        if(el.val().length > 500){
            el.val( el.val().substr(0, 500) );
        } else {
            $("#char-numb-"+textarea_cmnt_pure_id+",#char-numb-edit-"+textarea_cmnt_pure_id).css({"color": cmnt_length_color[Math.floor(el.val().length/50)]});
            $("#char-numb-"+textarea_cmnt_pure_id+",#char-numb-edit-"+textarea_cmnt_pure_id).text(500-el.val().length+' remins characters');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <form id="form-843">
        <textarea id="textarea-843"></textarea>
        <h4 id="char-numb-843">500 remins characters</h4>
    </form>

    <form>
       <textarea id="textarea-edit-843"></textarea>
       <h4 id="char-numb-edit-843">500 remins characters</h4>
    </form>

- stack

Answer 1

你需要使用.next()和.text()来处理<h4>标签

el.next('h4').text(value_you_need_here);

简单示例

- Mohamed-Yousef

Answer 2

使用jQuery的next()函数获取在你正在尝试的textarea元素之后的相关元素。通过传递参数到next('h1')来指定你想要下一个h4元素，从而细化你的选择。请考虑你程序的这个修订版本：

 var cmnt_length_color = ["#999", "#9b764f", "#9b764f", "#cf7721", "#cf7721", "#fe7a15", "#fe7a15", "#fe7a15", "#ea532b", "#ea532b"];

$("body").on('input', 'textarea', function() {
        el = $(this);
        var textarea_cmnt_id =  $(this).attr('id');
     var textarea_cmnt_pure_id = textarea_cmnt_id.replace(/[^0-9]/g, '');
        if(el.val().length > 500){
            el.val( el.val().substr(0, 500) );
        } else {
            $(this).next('h4').css({"color": cmnt_length_color[Math.floor(el.val().length/50)]});
         // ^^^^^^^^^^^^^^^^^^
            $(this).next('h4').text(500-el.val().length+' remins characters');
         // ^^^^^^^^^^^^^^^^^^
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <form id="form-843">
        <textarea id="textarea-843"></textarea>
        <h4 id="char-numb-843">500 remins characters</h4>
    </form>

    <form>
       <textarea id="textarea-edit-843"></textarea>
       <h4 id="char-numb-edit-843">500 remins characters</h4>
    </form>

- Nick Zuber

---

你的小提琴可以正常工作，但是我不知道为什么 next() 对我不起作用... :/ - stack

所以在这里它可以工作，但在你的实际程序中不行？看看我的更新，试试吧。 - Nick Zuber

@stack 很高兴能帮到你！ - Nick Zuber