CODEWITHSUNDEEP
javascriptjqueryhtmlclick
VoidKing
VoidKing

Reputation: 6422

Why can't javascript/jQuery get parentNode?

Considering that I have an element like this:

<p class="ELP">2/1/2013 - <a id="EL3" class="ELLink" href="/Event htms/Event.cshtml?title=Okmulgee Public Schools County Professional Day&amp;explanation=Okmulgee Public Schools County Professional Day.&amp;dateString=2-1-2013">City Public Schools County Professional Day</a></p>

Why does this JavaScript/jQuery work...:

$(".ELP").click(function (){
        var stringDate = $(this).text().substring(0, 8)
        console.log(stringDate)
    });

Console.log produces: 2/1/2013

...And this JavaScript/jQuery doesn't?

$(".ELLink").click(function (){
        var stringDate = $(this).parentNode.text().substring(0, 8)
        console.log(stringDate)
    });

Console.log produces nothing because of JavaScript error: Uncaught TypeError: Cannot call method 'text' of undefined

Clearly I can see that it is not 'getting' the right element, but why? Isn't the first parent node of my 'a' element the 'p' element? As far as I understand it, there is no (at least no cross-browser/platform compatible) valid css selector for the direct parent node of an element or i would just use that.

What am I not seeing?

Upvotes: 3

Views: 6765

Answers (5)

Mike Brant
Mike Brant

Reputation: 71384

You need to use parent() not parentNode. Like this:

$(".ELLink").click(function (){
    var stringDate = $(this).parent().text().substring(0, 8)
    console.log(stringDate)
});

Upvotes: 0

David Hoerster
David Hoerster

Reputation: 28701

Why not use:

var stringDate = $(this).parent().text().substring(0, 8)

Since you're already using jQuery, you can use the parent function.

Upvotes: 0

Ibu
Ibu

Reputation: 43840

The jQuery method is called parent()

$(".ELLink").click(function (){
        var stringDate = $(this).parent().text().substring(0, 8)
        console.log(stringDate)
    });

Upvotes: 7

Corneliu
Corneliu

Reputation: 2942

Because the jQuery object does not have a parentNode property.

var stringDate = $(this.parentNode).text().substring(0, 8);

Upvotes: 1

zzzzBov
zzzzBov

Reputation: 179166

$(...) does not return DOM elements, it returns an array-like object that references DOM nodes. DOM nodes have parentNode. jQuery instances do not.

If you need to select the immediate parents of the selected elements, you can use parent():

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

Upvotes: 0

Related Questions