jQuery Closest () не работает

Question

Может кто-нибудь объяснить, почему замена следующего

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

на

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

не работает ??

Answer 1

Посмотрите на документацию для .closest(). В нем говорится, что:

Учитывая объект jQuery, который представляет набор элементов DOM, .closest() метод ищет через эти элементы и их предков в дереве DOM и создает новый объект jQuery из соответствующего элементы. Методы .parents() и. closest() похожи в том, что они оба пересекают дерево DOM.

Поскольку искомый элемент не является предком вашей ссылки, он не будет работать. Чтобы достичь того, что вам нужно, вы можете использовать это вместо:

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

Answer 2

closest() используется для поиска ближайшего прямого родителя элемента.

В первом примере вы используете find(), чтобы найти элемент внутри родителя текущего элемента.Вот почему closest() терпит неудачу - .post_footer не является прямым родителем текущего элемента.

Если бы вы могли опубликовать HTML-структуру вашего кода, я мог бы предоставить вам более подробную информацию о том, как решить эту проблему.

Answer 3

Попробуйте сделать это ...

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

Предполагается, что вы определили PARENT_OF_POST_FOOTER_SELECTOR.