独特计算多个textarea的值

Question

我有3个textareas，我想要唯一地计算每个textarea的值并将其显示回来

$(".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>

我想只获取正在键入的特定文本区域的length。

Answer 1

使用next方法立即获得div.display。这个 方法允许我们搜索DOM中紧随其后的兄弟

$(".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>

Answer 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>

Answer 3

$(".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>