How can I get img src and text from distant elements using JQuery?

Question

Could you please lend a hand as I am having some trouble getting the text of a heading and the source of an image element in order to create a list of the item clicked. But I will explain better with some code:

Firstly I have a div element that goes like this:

<div class="main_page_entry">
    <div class="main_item_desc">
        <img class="main_item_pic" src="blah.jpg" />
        <h6><a href="blah.html">Item Title</a></h6>
        <span class="icon"> <img src="icon.png" /></span><br />            
        <span class="address">Some address</span>
        <p class="item_desc">More blahs and links for description </p>
    </div>

    <div class="item_controls">
        ...
        <a href="#" class="add_to_list">
            <img src="add_icon.gif" />Add to List
        </a>
        ...
    </div>  
</div>

It consists with a big div containing two smaller. What I want to do is the following: When I click on 'Add to List' link, I would like to get just the text inside and the main_item_pic source in order to create a list item with those two.

So here is my written code so far:

$('a.add_to_list').live('click', function() {
    var name = $(this).closest('h6').text();
    var source = $(this).closest('.main_item_pic').src;

    $('<li class="hide list_entry"><span class="entry_title">'+
        name+'</span><button class="remove_entry"></button>'+
        '<img class="list_entry" src="'+source+'" /></li>')
        .appendTo('#favs_list ul')
        .show('slow');
});   

Obviously this doesn't work: I've tried different solutions that I read around here like:

var name = $(this).closest('h6').html();
var source = $(this).closest('.main_item_pic').attr('src');

but oh well...no luck so far. Any ideas? Thanks in advance!

Answer 1

Try going back to the top and coming down again along the right DOM branch:

var src = $(this).closest('.main_page_entry')               // Back to the top
                 .find('.main_item_desc .main_item_pic')    // And down again.
                 .attr('src');

The closest method goes up the DOM tree through your ancestors:

Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.

So it won't cross over to any of the sibling branches. Then, once you're at the appropriate ancestor, you use find to come back down, find is just like $() but uses the specified element rather than document as the root:

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Answer 2

First off, if this content isn't added dynamically or in a live manner (in other words, if the content is loaded with the original HTML load) then you do not have to use the.live() function.

Also, why are you using.closest()? Couldn't you just do:

 <img class="main_item_pic" ref='pic1' src="blah.jpg" />
 <a ref='pic1' href="#" class="add_to_list">
    <img src="add_icon.gif" />Add to List
 </a>


$('a.add_to_list').click(function(){
 var ref  = $(this).attr('ref');
 var src  = $("img[ref='" + ref + "']").attr('src');
 var name = $('h6 a').text();
});

Answer 3

The closest method only finds the closest ancestor that matches the selector you pass it. Because the h6 and img you are looking for are not ancestors of the element you are calling it on, it won't find them. What you need is to find the closest element that contains both the element you are searching from and the elements you are trying to find, and use it as an intermediate step in the search:

var name = $(this).closest('.main_page_entry').find('h6').text();
var source = $(this).closest('.main_page_entry').find('.main_item_pic').attr('src');

Answer 4

The method closest() looks for ancestors. Your h6 and img are not ancestors of your link.

Also, I guess you don't want $('h6').html() but $('h6 a').html()