jQuery：使用jQuery UI对话框，父选择器无法正常工作

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：

  

描述：选择是另一个元素的父的所有元素，包括文本节点。

所以当你执行$("#throbber:parent") jQuery所做的是找到id为#throbber的元素时恰好是另一个元素（p和img标记的父元素这种情况）。

另一方面，

.parent()选择当前选择器的父级，因此执行$("#throbber").parent()会找到ID为#throbber的元素的父级。

Answer 2

.parent()获取当前匹配元素集中每个元素的父元素，可选择通过选择器进行过滤。

:parent选择所有作为另一个元素的父元素的元素，包括文本节点。

---

$("#throbber").parent().find(".ui-dialog-titlebar")从#throbber 向上到父母，然后向下到.ui-dialog-titlebar。可以访问#throbber的兄弟姐妹。

$("#throbber:parent .ui-dialog-titlebar")正在检查#throbber 是父母，然后向下到.ui-dialog-titlebar。只能访问#throbber的孩子。

Answer 3

我不认为：parent可以这样使用 - 它只是过滤你已经使用的选择器，只匹配其他元素的父对象（参见：http://api.jquery.com/parent-selector/）。所以它匹配#throbber元素，因为它正在寻找名为#throbber的元素，它是一个父元素！