jquery javascript如何在文本区域后最接近的div中显示一些html

我有3个文本区，每个文本区下有3个div，其中应该显示一些html

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

小提琴测试：

---

顺便说一句：

$（“.character\u count”）.text（“Characters:+count”）

确实有效，但html会显示在所有3个分区中…

TinyMCE有一个

wordcount

插件，可以告诉您这一点，而无需计算值。例如，您可以执行以下操作：

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

……或者

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

下面是一个运行示例：

好的，StackOverflow似乎不喜欢tinymce库，所以我把它从runnable中拉了出来，但这是我在您的JSFIDLE中得到的版本

由于

setup

回调中的

this

是一些tinymce对象，因此它不能用于jQuery。但是，

this.targetElm

似乎是tinymce初始化的元素，正在为其处理事件

因此，使用它，我们可以潜在地使用

$（this.targetElm）.next（'div'）

来获取您的元素，但是，您的下一个元素不是div。它是一个

。这意味着你可以做

next（）.next（'div'）

来获得它，但那是丑陋和脆弱的，所以

---

html的修改版本现在在每个textarea和div对周围都有一个包装器。将标记更改为这样，然后我们可以使用

最近（'.wrapper'）.find（'.character_count'）

逻辑向上导航到textarea和div的父元素，然后找到嵌套的div，无论它位于何处。

相关：

最近（

仅在dom树上。您正在查找

$（e.target）。next（'div'）

我尝试了

$（e.target）。next（.character\u count”）。text（'Characters:+count）但仍然不起作用…我想这里的问题是，因为您正在将textarea转换为tinymce对象，这些对象可能不是要向其显示逻辑的div的直接同级对象。所以这需要一些思考。
tinymce.activeEditor.plugins.wordcount.body.getCharacterCountWithoutSpaces() 

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;
};