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.