为什么使用 jquery 的最接近（）和文本（）不起作用答案

【问题标题】：Why is closest() and text() with jquery not working为什么使用 jquery 的最接近（）和文本（）不起作用
【发布时间】：2020-04-03 21:39:17
【问题描述】：

我有一个特殊情况，我想获取具有特定类名的 DIV 元素的文本，该类名与所选文本最接近。可能有多个具有相同类名的 DIV，因此我尝试获取最接近的一个。我从 getSelectionTextAndContainerElement() 获取选定的文本和选定文本所在的 HTMLDIVELEMENT。现在我尝试使用类 blogUser 找到最接近的 DIV 元素。继承我的 HTML 代码：

    <div class = "tHead">
    <div class = "tRow">
        <div class = "tCell">
<h1>{sBlogs.0.blogName}</h1>
        </div>
    </div>
</div>
    <f:for each="{sBlogs}" as="blog">
        <div class = "tSub">
            <div class = "tRow">
                <div class = "tCell blogUser">
    User: {blog.blogUser}
                </div>
                <div class = "tCell blogDate">
    Date: {blog.blogDate -> f:format.date()}
                </div>
                <div class = "tCell blogCat">
    Category: {blog.blogCat}
                </div>
            </div>
        </div>
        <div class = "content">
    {blog.blogContent}
        </div>
        <div class="links">
        <f:image class="reply" src="EXT:simpleblog/Resources/Public/Icons/search.svg" />
        </div>

    </f:for>
<div class="replyBlog">
    <f:form.textarea class="editBlog" property="editBlog" rows="10" cols="80"/>
</div>
<f:form.button type="button" class = "sButton editSave" title = "editSave" id = "editSave" name = "editSave">Speichern</f:form.button>
</f:form>

这是我的js代码

    $(".reply").on("click",function(){
    var textEl = getSelectionTextAndContainerElement();
    var className= "div."+textEl['containerElement']['className'];
    var divC=$(className).closest("div.tRow");
    alert(divC);
    var divC2=divC.find('div.blogUser');
    var bUser=divC2.text();
    alert(bUser);
    var text1=bUser+"\n"+textEl['text'];
    alert(text1);
    $(".editBlog").val(text1);

首先我尝试过：

        var divC=$(className).closest("div.blogUser").text();

但是 text() 函数总是返回一个空字符串。有趣的是，如果我直接选择div，它会返回一个字符串

$("div.blogUser").text();

vars divC 和 divC2 获取 jquery OBJECT，但如果我使用带有 text() 的对象，则不会返回任何值。

我不知道问题是什么！希望有人可以帮助我。

【问题讨论】：

这告诉我您的 className 对象无效并且\或 closest() 方法不是遍历的正确选择。请记住，您不能将原生 JS 与 JQuery 混合使用。 JQuery 要求它是一个 JQuery 对象（即$(object)）。
我没有看到我把 JS 和 JQUERY 混在一起了。从 JS 对象我得到了类名，从那里开始它是纯 JQUERY。也许最接近不是正确的方式，但正确的方式是什么？

标签： jquery closest

【解决方案1】：

我为我的问题找到了一个没有最接近的解决方案。首先我包装了一个补充

我还将 HTMLDIVOBJECT 转换为 jQuery 对象，以确保我在正确的块中。这是我的最终代码：

    <div class = "tHead">
    <div class = "tRow">
        <div class = "tCell">
<h1>{sBlogs.0.blogName}</h1>
        </div>
    </div>
</div>
    <f:for each="{sBlogs}" as="blog">
    <div class="block">
        <div class = "tSub">
            <div class = "tRow">
                <div class = "tCell blogUser">
    User: {blog.blogUser}
                </div>
                <div class = "tCell blogDate">
    Date: {blog.blogDate -> f:format.date()}
                </div>
                <div class = "tCell blogCat">
    Category: {blog.blogCat}
                </div>
            </div>
        </div>
        <div class = "content">
    {blog.blogContent}
        </div>
        <div class="links">
        <f:image class="reply" src="EXT:simpleblog/Resources/Public/Icons/search.svg" />
        </div>
    </div>

    </f:for>
    <div class="replyBlog">
        <f:form.textarea class="editBlog" property="editBlog" rows="10" cols="80"/>
    </div>
<f:form.button type="button" class = "sButton editSave" title = "editSave" id = "editSave" name = "editSave">Speichern</f:form.button>
</f:form>

jquery:

    $(".reply").on("click",function(){
    var textEl = getSelectionTextAndContainerElement();
    var bUser = jQuery(textEl['containerElement']).parent().find('div.blogUser').text();
    alert('Container: \n'+bUser);
    var text1 = bUser+"\n"+textEl['text'];
    alert(text1);
    $(".editBlog").val(text1);
});

【讨论】：