如何使用 jquery 获取父元素的文本？答案

【问题标题】：How to get the text of parent element using jquery?如何使用 jquery 获取父元素的文本？
【发布时间】：2011-05-26 13:08:29
【问题描述】：

我有一个 div，其中包含一个删除超链接，onlick 它，我想要 div 标签的文本。在 jquery 中怎么可能？！

<div>sometext<a href="#">delete</a></div>

我想获取 div 标签 'sometext' 的文本，如果可能的话，还要获取该 div 的 id。有什么想法吗？！

【问题讨论】：

您是否只想获得sometext，因为每个人都建议的普通.text() 方法不会仅获得sometext 它实际上会返回sometext delete，因为<a/> 在 <div/> 内
是的，我只想获取一些文本！
对我真的太好了：stackoverflow.com/questions/3442394/…

标签： jquery ajax text parent

【解决方案1】：

做的问题：

$(this).parent().text();

是它将获取 div 中的所有文本（一些文本并删除）。

我假设您只想要 div 中的文本而不是链接。

我在 jsFiddle 上敲了一个例子：

http://jsfiddle.net/HK794/

理想情况下，您可能希望将文本包装在一个跨度中，例如：

<div id="div1"><span>sometext</span><a href="#">delete</a></div>

那么你的 JavaScript 将是：

$("a").click(function(e){

    $div = $(this).parent("div");

    id = $div.attr("id");

    text = $div.find("span").text();

    alert( text  );

    e.preventDefault();
});

编辑

正如@DarthJDG 所说，如果您不想更改标记，任何这些也可以：

text = $div.get(0).childNodes[0].nodeValue;

//OR    
text = $div[0].childNodes[0].nodeValue;

//OR
text = $div.get(0).firstChild.nodeValue;

//OR
text = $div[0].firstChild.nodeValue;

//OR

//Gets the first text node
$div.contents().filter(function() {
    return this.nodeType == Node.TEXT_NODE;
}).text();

【讨论】：

万一您不想更改 HTML 标记，您可以从 HTML DOM 中提取第一个文本节点：$(this).parent()[0].firstChild.nodeValue
@tfbox 是的，你是对的，但是更改 HTML 标记比编写一些看起来很老套的 JavaScript 更容易。
好点@DarthJDG，将其添加到答案中。忘记使用它了。

【解决方案2】：

        var content;
        $(this).parent().contents().filter(function() {
            return this.nodeType == 3;
        }).each(
                function(i,el){
                    content = content + $(el).text();
                }
        );

这会将内容设置为文本的任何直接子项的值。

【讨论】：

【解决方案3】：

$('a').click(function() {
    var id = $(this).parent('div').attr('id');
    var html = $(this).parent('div').html().replace(/<.*>/g, "");
    alert(html);
});

【讨论】：

现在应该去掉所有的 html。
恐怕还是一样的值！

【解决方案4】：

虽然添加一个 span 标签可能会更有效

http://jsfiddle.net/tN8Mv/

$("a").click(function(){
var text = $(this).parent().clone()    //clone the element
        .children() //select all the children
        .remove()   //remove all the children
        .end()  //again go back to selected element
        .text();
    alert(text);
});

【讨论】：

@nickf 是的，这就是我在答案上方添加文字的原因:) 只是给了他所有选择

【解决方案5】：

mySiblingtext="";
myParentId = "";
    $('a').click(function(){
        var mypart = $(this)[0].previousSibling;
        mySiblingtext= $(mypart).text();
        myParentId = $(this).parent().attr('id');
        alert(mySiblingText+myParentId);
    });

jQuery 跳过所有遍历方法的文本节点（除了 .contents() ）。要访问前一个兄弟节点，在这种情况下是文本，无论 nodeType 是什么，您都可以访问 DOM 节点，然后使用 .previousSibling 属性。然后您可以访问该元素的文本。

如果父级也很简单，则访问 Id。

小提琴页面示例：http://jsfiddle.net/MarkSchultheiss/FuQ6g/

注意：这种方法的一个优点是如果您有如下标记：

<div id='aparent'>sometext<a href="#">delete</a>stuff after</div>

未选择“后面的内容”文本。

【讨论】：

【解决方案6】：

jQueryElement.parent().text();

【讨论】：