jquery javascript how to show some html in the closest div after a textarea

Question

I have 3 textareas and 3 divs under each in which some html should be showed.

<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>

<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>

<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>

When i am typing some text, in the div with class character_count below the textarea i am typing in, should the characters be displayed. I do not succeed in it:

This is my js:

tinymce.init({
        selector: '.tinymce',
        width: 400,
        setup: function (ed) {
            ed.on('keyup', function (e) {
                var count = CountCharacters();
                
                $(this).closest(".character_count").text("Characters: " + count); // find the closest div with class .character_count and show the html  
                
            });
        }
    });
   
    function CountCharacters() {
        var body = tinymce.activeEditor.getBody();
        var content = tinymce.trim(body.innerText || body.textContent);
        return content.length;
    };

Fiddle to test: https://jsfiddle.net/4vron96z/3/

BTW: $(".character_count").text("Characters: " + count); does work but then the html is displayed in all the 3 divs...

Answer 1

tinymce.init({
    selector: '.tinymce',
    width: 400,
    setup: function (ed) {
        ed.on('keyup', function (e) {
            var count = CountCharacters();
            $(this.targetElm).closest('.wrapper')
                .find('.character_count').text("Characters: " + count);
        });
    }
});
   
function CountCharacters() {
    var body = tinymce.activeEditor.getBody();
    var content = tinymce.trim(body.innerText || body.textContent);
    return content.length;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tinymce.cachefly.net/4.2/tinymce.min.js"></script>

<span class="wrapper">
  <textarea class="tinymce" rows="2" cols="20"></textarea><br />
  <div class="character_count"></div>
</span>

<span class="wrapper">
  <textarea class="tinymce" rows="2" cols="20"></textarea><br />
  <div class="character_count"></div>
</span>

<span class="wrapper">
  <textarea class="tinymce" rows="2" cols="20"></textarea><br />
  <div class="character_count"></div>
</span>

Ok, so StackOverflow doesn't seem to like the tinymce library so I pulled it out of the runnable, but here is the version I got working in your jsfiddle.

Since the this inside your setup callback is some tinymce object, it will not work with jQuery. However, the this.targetElm appears to be the element that the tinymce was initialized for and is processing the event for.

So, using that, we could potentially use $(this.targetElm).next('div') to get your element, BUT, your next element is not the div. It is a <br /> you have in there. Which means you could do next().next('div') to get it, but that is ugly and fragile, SO!

The modified version of your html now has a wrapper around each textarea and div pairing. Changing the markup to be that, we can then use the closest('.wrapper').find('.character_count') logic to navigate up to the parent element of both the textarea and the div, and then find the nested div, no matter where it resides.

Answer 2

TinyMCE has a wordcount plugin that can tell you this without having to calculate the value. For example you could do something like:

tinymce.activeEditor.plugins.wordcount.body.getCharacterCount() 

...or...

tinymce.activeEditor.plugins.wordcount.body.getCharacterCountWithoutSpaces() 

Here is a running example:

http://fiddle.tinymce.com/Gmhaab