2017-10-01 1 views
0

Ich habe 3 Textbereiche, möchte ich eindeutig den Wert jedes Textfeld zählen und anzeigen zurückEinzigartig Wert von mehreren TextArea- zählen

$(".textarea").keyup(function(){ 
 
    $(".display").text($(this).val().length); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="textarea"></textarea> 
 
<div class="display"></div> 
 

 
<textarea class="textarea"></textarea> 
 
<div class="display"></div> 
 

 
<textarea class="textarea"></textarea> 
 
<div class="display"></div>

Ich möchte nur die length des bekommen bestimmte Textarea, in die getippt wird.

Antwort

4

Verwenden next Methode die sofortige nächsten div.display zu bekommen. Diese Methode ermöglicht es uns, durch die unmittelbar folgenden Geschwister im DOM suchen

$(".textarea").keyup(function() { 
 
    $(this).next(".display").text($(this).val().length); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="textarea"></textarea> 
 
<div class="display"></div> 
 

 
<textarea class="textarea"></textarea> 
 
<div class="display"></div> 
 

 
<textarea class="textarea"></textarea> 
 
<div class="display"></div>

2

$(".textarea").keyup(function() { 
 
    $(this).parent().find(".display").text($(this).val().length); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <textarea class="textarea"></textarea> 
 
    <div class="display"></div> 
 
</div> 
 

 
<div> 
 
    <textarea class="textarea"></textarea> 
 
    <div class="display"></div> 
 
</div> 
 

 
<div> 
 
    <textarea class="textarea"></textarea> 
 
    <div class="display"></div> 
 
</div>

1

$(".textarea").keyup(function(){ 
 
    $(this).next(".display").text($(this).val().length); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<textarea class="textarea"></textarea> 
 
<div class="display"></div> 
 

 
<textarea class="textarea"></textarea> 
 
<div class="display"></div> 
 

 
<textarea class="textarea"></textarea> 
 
<div class="display"></div>