.attr("href") returning undefined

Question

Here is a simplified version of my HTML

<div class="post-title-div">
    <a href="link" class="post-title">Link</a>
</div>
<div></div>
<div>
    <img class="eye-icon" src="link.jpg"/>
</div>

JavaScript:

  $(".eye-icon").click(function(){
    var link = $(this).parent('.post-title-div').find(".post-title").attr("href");
  })

alert(link) returns undefined, why?

$(this).parent('.post-title-div').find(".post-title") by itself returns [object Object]

the jQueery $(this).parent('.post-title-div') will fail to find the div you want as - but jQueery returns a jQueery object, and even running a .find on a failed jQueery wont show any errors, such is the "forgiving" nature of jQueery ... — Jaromanda X, Jul 04 '15 at 10:18

Royi Namir · Accepted Answer · 2015-07-04T10:27:37.777

3

Parent/Parents/Closest is not what you're after :

 $(".eye-icon").click(function(){

    var link = $(this).parent().prev().prev().find(".post-title").attr("href");
   alert(link)
  })

You don't have a common parent there.

http://jsbin.com/tupeta/edit?html,js,output

However , I suggest that you add a new container which will contain them all . something like :

<div class='wrapper'> 
 <div class="post-title-div">
    <a href="link" class="post-title">Link</a>
</div>
<div></div>
<div>
    <img class="eye-icon" src="link.jpg"/>
</div>
</div>

So now you can do :

 $(".eye-icon").click(function(){

    var link = $(this).closest('.wrapper').find(".post-title").attr("href");
   alert(link)
  })

edited Jul 04 '15 at 10:27

answered Jul 04 '15 at 10:18

Royi Namir

144,742
138
468
792

Still giving `undefined` for some reason – frosty Jul 04 '15 at 10:22
`.post-title-div` isn't ancestor of `.eye-icon` – A. Wolff Jul 04 '15 at 10:24
yep, new edit works. sad my post got downvoted to hell though. I thought `parent()` went up to find it – frosty Jul 04 '15 at 10:27

score 0 · Answer 2 · answered Jul 04 '15 at 10:20

The parent of the <img> is the nondescript <div> which surrounds it. jQuery then looks in that div for '.post-title-div', doesn't find anything and returns an empty selector object. In that empty selector it then looks for .post-title and - naturally - doesn't find anything either. It then tries to read an attribute on the new, also empty, selector, which of course can't return anything useful.

The reason why $(this).parent('.post-title-div').find(".post-title") returns an [object Object] is because jQuery selectors never return undefined, they always return another selector, which can be an empty selector.

.attr("href") returning undefined

2 Answers2