Comment calculer les caractères restants dans la zone de texte multiple

Question

Bonjour, je voulais calculer les caractères restants dans plusieurs zones de texte en utilisant jquery, cela fonctionne, mais je veux calculer chaque boîte uniquement, et je connais le problème de la duplication des résultats parce que je utiliser la même classe de la div, désolé je suis nouveau est-il un bon moyen de résoudre ce problème sans utiliser des classes différentes et répéter les scripts 4 fois? parce que ce n'est pas logique?

$(function() { 
 
$('textarea').keyup(function() { 
 
var maxLength = $(this).attr('maxlength'), 
 
    textLength = $(this).val().length, 
 
    remText = (maxLength - textLength); 
 
    $('.text').html(remText + ' characters remaining') 
 

 
}); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<textarea maxlength="20"></textarea> 
 
<div class='text'></div> 
 

 
<textarea maxlength="20"></textarea> 
 
<div class='text'></div> 
 

 
<textarea maxlength="20"></textarea> 
 
<div class='text'></div> 
 

 
<textarea maxlength="20"></textarea> 
 
<div class='text'></div>

Answer 1

Isoler l'instance en utilisant un procédé de traversée comme next().

$(function() { 
 
    $('textarea').keyup(function() { 
 
    var maxLength = $(this).attr('maxlength'), 
 
     textLength = $(this).val().length, 
 
     remText = (maxLength - textLength); 
 
    $(this).next('.text').html(remText + ' characters remaining'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<textarea maxlength="20"></textarea> 
 
<div class='text'></div> 
 

 
<textarea maxlength="20"></textarea> 
 
<div class='text'></div> 
 

 
<textarea maxlength="20"></textarea> 
 
<div class='text'></div> 
 

 
<textarea maxlength="20"></textarea> 
 
<div class='text'></div>