jQuery的查找最接近圖片src到一個div

Question

，如果我有以下的HTML：

<div class="showPin"> 
    <div class="pinIt" style="display: none;"> 
     <a href="#" onclick="window.open(&quot;http://pinterest.com/pin/create/button/?url=http://mysite.com/some-post&amp;description=Some Description&amp;media=http://mysite.com/path/to/myimage.jpg&quot;,&quot;Pinterest&quot;,&quot;scrollbars=no,menubar=no,width=600,height=380,resizable=yes,toolbar=no,location=no,status=no&quot;);return false;"><img src="images/pinbutton.jpg" class="pinbuttonImg"></a> 
    </div> 
    <a href="myimage.jpg"> 
     <img class="lazy data-lazy-ready" src="myimage.jpg" data-lazy-type="image" data-lazy-src="http://dev.papermusepress.com/stageblog/wp-content/uploads/2012/11/Fall_baby_shower_mantle2.jpg" alt="Fall Baby Shower Mantle" width="700" height="393" style="display: inline;"> 
    </a> 
</div> 

我怎樣才能讓我的警報功能工作，所以它提醒IMG SRC是實際的圖像得到固定，這有一個class="lazy"總是在其中。

$('div.pinIt').click(function() { 
    var url = $(this).closest('img.lazy').attr('src');  
    alert(url); 
}); 

所有它警告我是undefined。我究竟做錯了什麼？

Answer 1

$('div.pinIt').click(function() { 
    var url = $(this).next('a').find('img.lazy').attr('src');  
    alert(url); 
}); 

最近traverses thru the ancestors。 但該圖像位於div的sibling(anchor tag)內。因此，嘗試這種方式..

如果你想使用.closest()那麼這應該工作..

$('div.pinIt').click(function() { 
     var url = $(this).closest('.showPin').find('img.lazy').attr('src');  
     alert(url); 
    }); 

Answer 2

一個最簡單的方法是去到父母和搜索內部圖像元素：

$("div.pinIt").click(function() { 
    var url = $(this).closest("div.showPin").find("img.lazy").attr("src"); 
    alert(url); 
});