.attr(“href”)返回undefined

时间:2015-07-04 10:15:15

标签: javascript jquery

以下是我的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)返回undefined,为什么?

$(this).parent('.post-title-div').find(".post-title")本身会返回[object Object]

2 个答案:

答案 0 :(得分:3)

Parent / Parents / Closest不是您追求的目标:

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

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

你在那里没有共同的父母。

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

但是,我建议您添加一个包含所有容器的新容器。类似的东西:

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

现在你可以这样做:

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

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

答案 1 :(得分:0)

<img>的父级是围绕它的不起眼的<div>。然后jQuery查找该'.post-title-div'的div,找不到任何内容并返回一个空的选择器对象。在那个空的选择器中,它然后查找.post-title并且 - 自然 - 也找不到任何东西。然后它尝试在新的,也是空的选择器上读取一个属性,这当然不能返回任何有用的东西。

$(this).parent('.post-title-div').find(".post-title")返回[object Object]的原因是因为jQuery选择器永远不会返回undefined,它们总是返回另一个选择器,它可以是一个空的选择器。