Question

为什么这样做：

$('.button_30').click(function(){
    $(this).closest('.portlet').find('.portlet_content').text("foo");
});

为什么这不起作用：

$('.button_30').click(function(){
    $(this).parent('.portlet').find('.portlet_content').text("foo");
});

其中html看起来像这样：

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30" />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30 />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

Answer 1

如果parent()匹配指定的选择器，closest()将返回父（直接祖先）。

但是，parents()会搜索所有祖先，并返回与选择器匹配的第一个。

由于button_30的父级是div，其父级是div，其类portlet，parent()函数与之匹配并返回一个空集，其中_ closest() 匹配。

要在此处完成一组类似的方法，您需要{{3}}，就像closest()，但不会停在第一个匹配的元素上;它返回与选择器匹配的所有祖先。

Answer 2

.parent()只关注直系祖先。
.closest()查看所有祖先以及原始元素，并返回第一个匹配项。
.parents()查看所有祖先，并返回所有匹配项。

Answer 3

parent()只看一级，你可以尝试parents()一直搜索

$('.button_30').click(function(){
    $(this).parents('.portlet').find('.portlet_content').text("foo");
});

您可以看到documentation

Answer 4

closest ^{[API Ref]} 方法遍历祖先树，直到找到选择器匹配为止。

parent ^{[API Ref]} 方法仅查看直接父级。

Answer 5

parent方法仅检查元素链上的一个级别，而closest将继续检查父级列表，直到找到匹配项（或已达到html标记）。相当于：

$('.button_30').click(function(){
    $(this).parents('.portlet:eq(0)').find('.portlet_content').text("foo");
});

Answer 6

因为匹配.portlet的唯一元素是祖父母，而不是绑定事件的元素的父母

Answer 7

因为在第二个选择器中你正在寻找父和这个函数移动到DOM到节点父，但只有one level包含类portlet_footer portlet_footer_30而不是那个类你传递给选择器.portlet与parent一起使用，换句话说你应该移动两个级别。

each time that you're using parent you move one node up

父母与最近

7 个答案: