這兩個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"元素內的某個地方。

編輯：
注意：由於問題在我回答後進行了編輯，第一句不適用於問題目前的樣子。