这两个jQuery选择器有什么区别？

Question

有了这个标记：

<div id="e"> 
    <div id="f"></div> 
</div> 

是否$('#e > #f')返回相同的$('#e #f')？

Answer 1

parent > child选择器只会寻找直接子元素，而ancestor descendant将寻找任何后代元素。

例如，下面的标记：

<div class="foo"> 
    <div> 
    <div class="bar"></div> 
    </div> 
</div> 

$('.foo > .bar')将找不到.bar元素，而$('.foo .bar')确实发现它，因为.foo不是来自.bar直接孩子，但它是一个后代。

Answer 2

在这个例子中，是的，他们会返回相同的东西。

Answer 3

这不起作用，因为您没有指定要查找的元素。您需要将#e> #f或#e #f抓取您的ID。

如果这是一个真实的场景，#e> #f将只能找到孩子，没有嵌套在下面。 #e #f将抓取任何id =“f”元素，无论它们嵌套在结构中多远。

Answer 4

首先，我假设你的意思是$('#e > #f')和$('#e #f')。

在你的例子中，他们都会返回相同的东西。不同的是，$('#e #f')也将在这种情况下返回一个div：

<div id="e"> 
    <div id="g"> 
    <div id="f"></div> 
    </div> 
</div> 

$('#e > #f')，而另一方面，会不会有什么回报，因为它只会选择其中的直接子等元素元素。

Answer 5

是的，因为HTML中没有e或f元素，它们将始终返回空的jQuery对象。

如果该元素是id="e"元素的直接后缀，则调用$('#e > #f')将返回元素id="f"。

电话$('#e #f')将返回元素与id=f，如果它是在id="e"元素内的某个地方。

编辑：
注意：由于问题在我回答后进行了编辑，第一句不适用于问题目前的样子。