Как выбрать соседний элемент с помощью jquery?

Question

У меня есть два <textarea> и два <h4>. Также у меня есть функция для подсчета количества символов, которые находятся в текстовом поле, и печатает это число в <h4>.

Теперь моя проблема: количество символов зависит от обоих <textarea> s. Я хочу, чтобы каждый счетчик был зависеть от своего собственного <textarea>. Как?

\t 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'); 
 
    \t 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>

Answer 1

вам нужно использовать .next() и .text() для <h4>

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

Simple Demo

Answer 2

Получить относительный элемент после textarea вы пытаетесь в систему с помощью JQuery-х next() марихуана nction. Уточните свой выбор, указав, что вы хотите следующий элемент h4, передав параметр next('h1').

Рассмотрим эту пересмотренную версию программы:

\t 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'); 
 
    \t 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>