How to get the text of parent element using jquery

问题:

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

回答1:

The problem with doing:

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

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

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

I've knocked up an example on jsFiddle:

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:

$("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:

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:

        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:

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

回答4:

Although adding in a span tag would probably more efficent

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:

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.

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

Sample fiddle page: 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:

jQueryElement.parent().text();