唯一计算多个文本区域的值答案

【问题标题】：Uniquely count value of multiple textarea唯一计算多个文本区域的值
【发布时间】：2018-03-12 18:01:29
【问题描述】：

我有3个textarea，我想唯一统计每个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。

【问题讨论】：

标签： javascript jquery textarea this string-length

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：