3

有人可以解释一下为什么要替换以下内容

$('.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')
});

不工作？？

4

3 回答 3

6

查看. _ .closest()它指出：

给定一个表示一组 DOM 元素的 jQuery 对象，该 .closest()方法在 DOM 树中搜索这些元素及其祖先，并从匹配的元素构造一个新的 jQuery 对象。和.parents()。closest()方法的相似之处在于它们都向上遍历 DOM 树。

由于您要查找的元素不是您的链接的祖先，因此它不会起作用。为了实现您的需要，您可以改用它：

$(this).parents().next('.post_footer').eq(0).toggleClass('footer_border');
于 2012-01-08T16:45:11.413 回答
3

closest()用于查找元素的最近的直接父级。

在您的第一个示例中，您使用find()在当前元素的父元素中定位一个元素。这就是为什么closest()失败 -.post_footer不是当前元素的直接父级。

如果您可以发布代码的 HTML 结构，我可以为您提供有关如何解决此问题的更多详细信息。

于 2012-01-08T16:42:46.273 回答
0

尝试这样做...

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

这假设您已经定义了 PARENT_OF_POST_FOOTER_SELECTOR。

于 2012-01-08T16:51:05.770 回答