Как подсчитать конкретный c символ live onkeyup с jquery в каждом столбце?

Question

У меня есть скрипт для подсчета определенных c символов из строк строк. Это 70 строк. Но всякий раз, когда я вставляю каждое текстовое поле. Я считаю такую ​​же ценность. Пожалуйста, посмотрите здесь: https://jsfiddle.net/nobuts/hp3t7kju/3/

$('.counter').on('keyup',function(){
var str=$('textarea').val();
var count = (str.match(/=/g) || []).length;
$(this).find('span').html(count);
});

Answer 1

Вы можете просто, и самое простое решение - использовать функцию .children , чтобы проверить, какой textarea является keyup

$(this) относится к элементу, который мы используем. функция включена в данный момент при наборе текста.

Демо

$('.counter').on('keyup', function() {
  var str = $(this).children('textarea').val()
  var count = (str.match(/=/g) || []).length;
  $(this).find('span').html(count);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-4 counter">
      <strong>Input1</strong> <span class="text-danger"></span><br />
      <textarea name="input2a" rows="10" class="form-control" cols="5"></textarea><br />
    </div>
    <div class="col-lg-4 counter">
      <strong>Input2</strong> <span class="text-danger"></span><br />
      <textarea name="input3a" rows="10" class="form-control" cols="5"></textarea><br />
    </div>
    <div class="col-lg-4 counter">
      <strong>Input3</strong> <span class="text-danger"></span><br />
      <textarea name="input2b" rows="10" class="form-control" cols="5"></textarea><br />
    </div>
  </div>
</div>

Answer 2

Вы почти у цели. Вам нужно найти textarea внутри counter класса, используя this, чтобы получить другое количество. В противном случае он берет сначала textarea и дает тот же результат.

$('.counter').on('keyup',function(){
    var str=$(this).find('textarea').val();
    var count = (str.match(/=/g) || []).length;
    $(this).find('span').html(count);
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-lg-4 counter">
      <strong>Input1</strong> <span class="text-danger"></span><br />
      <textarea name="input2a" rows="10" class="form-control" cols="5"></textarea><br />
    </div>
    <div class="col-lg-4 counter">
      <strong>Input2</strong> <span class="text-danger"></span><br />
      <textarea name="input3a" rows="10" class="form-control" cols="5"></textarea><br />
    </div>
    <div class="col-lg-4 counter">
      <strong>Input3</strong> <span class="text-danger"></span><br />
      <textarea name="input2b" rows="10" class="form-control" cols="5"></textarea><br />
    </div>
  </div>
</div>