Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery finding closest image src to a div

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?

like image 650
thindery Avatar asked Dec 03 '12 22:12

thindery


People also ask

How to find the closest element in jquery?

The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent, great-grandparent, and so on. The DOM tree: This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.


2 Answers

$('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);
    });
like image 74
Sushanth -- Avatar answered Oct 14 '22 09:10

Sushanth --


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);
});
like image 35
VisioN Avatar answered Oct 14 '22 10:10

VisioN