如何使用jquery获取父元素的文本?

时间:2022-11-27 11:43:20

I have a div which contains a delete hyperlink, onlick of it, I want the text of the div tag. How is it possible in jquery?!

我有一个包含删除超链接的div,点击它,我想要div标签的文本。怎么可能在jquery?!

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

I want to get the text of div tag 'sometext' and if possible the id of that div too. Any ideas?!

我想得到div标签'sometext'的文本,如果可能的话也得到div的id。有任何想法吗?!

6 个解决方案

#1


12  

The problem with doing:

做的问题:

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

is that it will get ALL the text within the div (sometext AND delete).

是它将获得div中的所有文本(sometext AND delete)。

I'm assuming you only want the text in the div and not the link.

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

I've knocked up an example on jsFiddle:

我在jsFiddle上打了一个例子:

http://jsfiddle.net/HK794/

http://jsfiddle.net/HK794/

Ideally you might want to wrap the text in a span, like:

理想情况下,您可能希望将文本换行,例如:

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

Then your JavaScript would be:

然后你的JavaScript将是:

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

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

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

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

    alert( text  );

    e.preventDefault();
});

EDIT

编辑

As @DarthJDG states if you don't want to change your markup, any these would also work:

正如@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();

#2


1  

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

This sets content to the value of any direct children which are text.

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

#3


0  

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

#4


0  

Although adding in a span tag would probably more efficent

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

http://jsfiddle.net/tN8Mv/

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

#5


0  

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

jQuery skips over text nodes for all of its traversal methods ( except .contents() ). To access the previous sibling, then text in this case, regardless of nodeType, you can access the DOM node and then use the .previousSibling property. Then you can access the text of that element.

jQuery跳过文本节点的所有遍历方法(.contents()除外)。要访问上一个兄弟,然后在这种情况下发送文本,无论nodeType如何,您都可以访问DOM节点,然后使用.previousSibling属性。然后,您可以访问该元素的文本。

Access to the Id if the parent is then simple as well.

如果父母也很简单,则访问Id。

Sample fiddle page: http://jsfiddle.net/MarkSchultheiss/FuQ6g/

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

NOTE: one advantage of this method is if you have markup like:

注意:此方法的一个优点是,如果您有以下标记:

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

the "stuff after" text is not selected.

未选中“之后的东西”文本。

#6


-1  

jQueryElement.parent().text();

jQueryElement.parent()文本();

#1


12  

The problem with doing:

做的问题:

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

is that it will get ALL the text within the div (sometext AND delete).

是它将获得div中的所有文本(sometext AND delete)。

I'm assuming you only want the text in the div and not the link.

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

I've knocked up an example on jsFiddle:

我在jsFiddle上打了一个例子:

http://jsfiddle.net/HK794/

http://jsfiddle.net/HK794/

Ideally you might want to wrap the text in a span, like:

理想情况下,您可能希望将文本换行,例如:

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

Then your JavaScript would be:

然后你的JavaScript将是:

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

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

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

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

    alert( text  );

    e.preventDefault();
});

EDIT

编辑

As @DarthJDG states if you don't want to change your markup, any these would also work:

正如@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();

#2


1  

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

This sets content to the value of any direct children which are text.

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

#3


0  

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

#4


0  

Although adding in a span tag would probably more efficent

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

http://jsfiddle.net/tN8Mv/

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

#5


0  

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

jQuery skips over text nodes for all of its traversal methods ( except .contents() ). To access the previous sibling, then text in this case, regardless of nodeType, you can access the DOM node and then use the .previousSibling property. Then you can access the text of that element.

jQuery跳过文本节点的所有遍历方法(.contents()除外)。要访问上一个兄弟,然后在这种情况下发送文本,无论nodeType如何,您都可以访问DOM节点,然后使用.previousSibling属性。然后,您可以访问该元素的文本。

Access to the Id if the parent is then simple as well.

如果父母也很简单,则访问Id。

Sample fiddle page: http://jsfiddle.net/MarkSchultheiss/FuQ6g/

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

NOTE: one advantage of this method is if you have markup like:

注意:此方法的一个优点是,如果您有以下标记:

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

the "stuff after" text is not selected.

未选中“之后的东西”文本。

#6


-1  

jQueryElement.parent().text();

jQueryElement.parent()文本();