jquery - parent 与最亲近的人

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()将搜索所有 祖先并返回与选择器匹配的第一个。

因为button_30的父级是一个div，它的父级是div，类是portlet ，parent() 函数不匹配它并返回一个空集，而 closest() 匹配它。

---

要在这里完成一组类似的方法，您有 parents() ，类似于 closest() 但 doesnt 在第一个匹配元素处停止；它返回与选择器匹配的所有祖先。