javascript - jQuery :parent selector doesn't work as expected with jQuery UI dialog

Question

我有一个 jQuery UI 对话框，我想在没有标题的情况下呈现它。我已经开始工作了，这不是问题所在。

我很好奇的是，为什么 jQuery :parent 选择器不会选择对话内容 div 的父级，而是选择 parent() 功能。这是一个有效的例子:

HTML:

<input id="example1" type="button" value="Use :parent selector">
<input id="example2" type="button" value="Use parent() function">

<!-- 
One of many dialogues on the page, but this one needs
the title removed.
-->

<div id="throbber" style="display:none">
    <p>Doing work...be patient....</p>
    <img src="http://i.stack.imgur.com/GUw9u.gif"/>
</div>

脚本:

$("#example1").bind("click", function() {
    $("#throbber").dialog("destroy"); // for jsfiddle example
    $("#throbber").dialog({
        resizable: false,
        modal: false,
        width: 150
    });

    $("#throbber:parent .ui-dialog-titlebar").hide();
});

$("#example2").bind("click", function() {
    $("#throbber").dialog("destroy"); // for jsfiddle example
    $("#throbber").dialog({
        resizable: false,
        modal: false,
        width: 150
     });

    $("#throbber").parent().find(".ui-dialog-titlebar").hide();
});

这是 jsFiddle 中的上述代码:

http://jsfiddle.net/kevink/kPMQf/

在 chrome 中，如果我在呈现对话框后设置断点，如果我按预期执行 $("#throbber:parent")，它会选择自己:

如果我尝试选择它的 :parent 它不会，它只会再次选择自己:

如果我使用 $("#throbber").parent()，这次它选择它的父级:

这里发生了什么，为什么 :parent 不选择 #throbber 的父级，而 .parent() 却选择了？

Answer 1

来自jQuery docs for the :parent selector :

Description: Select all elements that are the parent of another element, including text nodes.

所以当你执行 $("#throbber:parent") 时，jQuery 所做的是找到 ID 为 #throbber 的元素，它恰好是另一个元素的父元素(在本例中为 p 和 img 标签)。

.parent() ，另一方面，选择当前选择器的父级，因此执行 $("#throbber").parent() 将找到 ID 为 #throbber< 的元素的父级.