jQuery - Match elements with same data

Question

I like to match textarea data with span data when you type in each textarea to retun char left in the span with same data

How to match them ?

html

 <span data-lang="gb"></span>
<textarea data-lang="gb"></textarea>

<span data-lang="en"></span>
<textarea data-lang="en"></textarea>

jquery

 $('textarea').each(function(){
  var lang = $(this).data('lang');
  $(this).keyup(function(){
    if (this.value.length > 50) {
      return false;
    }
    $('span').html("(characters left: " +(50 - $(this).val().length) + " )");
  });
});

Ok? What have you tried? I don't see any selector in this snippet trying to get the span. — Taplar, Aug 23 '18 at 14:36
You want it so when you type in a textarea, a span with the same `data-lang` shows the textarea char count? — Phiter, Aug 23 '18 at 14:38

score 0 · Answer 1 · answered Aug 23 '18 at 14:51

You can make a data attribute in your text area telling it what is it's counter element and use it to select and update the counter.

Like this:

$("[data-counter]").on('input', function (e) {
  var counter = $(this).data('counter');
  var $counter = $(counter);
  var maxlength = parseInt($(this).attr('maxlength'));
  var count = $(this).val().length;
  $counter.text('Characters left: ' + (maxlength - count));
}).trigger('input');

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

<textarea id="mytext" data-counter="#mytextcounter" maxlength="50"></textarea>
<span id="mytextcounter"></span>

score 0 · Accepted Answer · answered Aug 23 '18 at 16:00

0

You are very close to the point:

$('textarea').each(function(){
  var lang = $(this).data('lang');
  $(this).keyup(function(){
    if (this.value.length > 50) {
      return false;
    }
    $('span[data-lang="'+lang+'"]').html("(characters left: " +(50 - $(this).val().length) + " )");
  });
});

As you can see for example here you can select an element by data attribute. Please note that this code is untested

answered Aug 23 '18 at 16:00

Lelio Faieta

6,457
7
40
74

that i was looking for 'span[data-lang="'+lang+'"]' thanks a lot you are master :) – Aug 24 '18 at 07:14
Thank you. If this is what you are looking for please consider accepting the answer – Lelio Faieta Aug 24 '18 at 07:15

jQuery - Match elements with same data

2 Answers2