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文档

说明:选择其他元素的父元素，包括文本节点。

因此，当您执行$("#throbber:parent")时，jQuery所做的是使用id #throbber查找元素，该元素恰好是另一个元素的父元素(在本例中是p和img标记)。

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

Answer 2

.parent()获取当前匹配元素集合中每个元素的父元素，可以选择由选择器筛选。

*父母选择其他元素的父元素(包括文本节点)的所有元素。

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

$("#throbber:parent .ui-dialog-titlebar")正在检查#throbber 是否是的父母，然后把送上.ui-dialog-titlebar。只能访问#throbber的子级。

Answer 3

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