jQuery Closest() isn't working

Question

Could someone please explain me why replacing the following

$('.post_title a').hover(function () {
    $(this).parent().parent().parent().parent().find(".post_footer").toggleClass('footer_border')
});

with

$('.post_title a').hover(function () {
    $(this).closest(".post_footer").toggleClass('footer_border')
});

doesn't work??

Answer 1

Look at the documentation for .closest(). It states that:

Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements. The .parents() and .closest() methods are similar in that they both traverse up the DOM tree.

Since the element you're looking for isn't an ancestor of your link, it won't work. To achieve what you need, you could use this instead:

$(this).parents().next('.post_footer').eq(0).toggleClass('footer_border');