Question

81

jQuery finding closest image src to a div

rated 0 times [ 86] [ 5] / answers: 1 / hits: 18147 / 12 Years ago, mon, december 3, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sienad

Add To Favorites

Follow

Total Points: 208

Total Questions: 100

Total Answers: 77

Location: Taiwan

Member since Mon, Sep 6, 2021

3 Years ago

answered 12 Years ago blaisep · Accepted Answer

$('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);

    });