jQuery finding closest image src to a div

Question

if I have the following 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>

how can i get my alert function to work so it alerts the img src that is the actual image getting pinned, which has a class="lazy" always in it.

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

all it alerts for me is undefined. what am i doing wrong?

Answer 1

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

Closest traverses thru the ancestors. But the image is inside the sibling(anchor tag) of the div. So try it this way..

If you want to use .closest() then this should work..

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

Answer 2

One of the easiest ways is to go up to parent and search for image element inside:

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