.attr("href") 返回未定義

Question

這是我的 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)返回未定義，為什么？

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

Answer 1

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

Answer 2

<img>的父<img>是圍繞它的不起眼的<div> 。 jQuery 然后在那個 div 中查找'.post-title-div' ，沒有找到任何東西並返回一個空的選擇器對象。 在那個空的選擇器中，它然后查找.post-title並且 - 自然 - 也找不到任何東西。 然后它嘗試讀取新的也是空的選擇器上的屬性，這當然不能返回任何有用的東西。

$(this).parent('.post-title-div').find(".post-title")返回一個[object Object]的原因是因為 jQuery 選擇器從不返回 undefined，它們總是返回另一個選擇器，即可以是一個空的選擇器。