Question

Here is my HTML:

                    <li>
                        <div class="menu_inner">
                            <a href="#">
                                <div class="button"><img class="486" src="images/portalbutton.png" /></div>
                                <div class="prod_description">&nbsp;</div>
                            </a>
                        </div>
                    </li>

I want to add a .click() function to .prod_description, the click event should take the background colour applied in CSS from the li element.

Using this code:

$(".prod_description").mousedown(function() {
    $('#toolbar').css('background-color', $(this).parent().css('background-color'))
})

I dont seem to be able to get the correct $(this).parent() combination….

Answer 1

You can do that like this:

$(".prod_description").mousedown(function() {
    $('#toolbar').css('background-color', $(this).closest('li').css('background-color'))
});

.parent() gets the immediate parent, you want to go up a few levels (<a>, <div>, <li>). .closest('li') climbs the parents and gets the first one that’s an <li>. In this case, .parent('li') would also work 🙂