在jQuery選擇器中，直接後代（>）與後代有什麼區別？

Question

這兩個jQuery語句有什麼區別？他們似乎通過獲得所有兒童div標籤來做同樣的事情。

$("#mainblock div") 

$("#mainblock > div") 

Answer 1

$("#mainblock > div")直接子=孩子的唯一水平

$("#mainblock div") =所有孩子的+ desendents。

Answer 2

第一個將得到所有div S的#mainblock後裔。第二個將得到所有div S中的的#mainblock

Answer 3

看一看jQuery的Selectors

Child Selector ("parent > child") - 層次選擇由「父母」指定元素的「小孩」中規定的所有直接子元素。

Descendant Selector ("ancestor descendant")- 層次結構選擇作爲給定祖先的後代的所有元素。

Answer 4

$("#mainblock div") 

匹配任何div元素，它是#mainblock的後代。

$("#mainblock > div") 

匹配任何div元素是#mainblock的子元素。

檢查http://www.w3.org/TR/CSS2/selector.html

Answer 5

第一個將選擇任何的div是`#mainblock」的孩子在任何級別。第二個會選擇任何一個直屬的div。

有關CSS >選擇器的更多信息，請參見此link，該選擇器的行爲與jQuery中的行爲相同。

Answer 6

$("#mainblock div") 

這一目標的所有div內「#mainblock」不管它是「#mainblock」直接子，或主塊左右的兒童的孩子。

$("#mainblock > div") 

這將只針對「#mainblock」的直接子DIV並忽略其他DIV。如果你只有直接的孩子，這個比你快。因爲它不是試圖在孩子的其他元素內部找到。

Answer 7

$（ 「＃DIV mainblock」）找到所有下#mainblock的div

$（ 「＃mainblock> DIV」），才發現其子

假設你有以下HTML結構：

<div id="mainblock"> 
     <div> 
     <div></div> 
     <div></div> 
     </div> 
    <div></div> 
    <div></div> 
    </div> 

然後

$("#mainblock div").length = 5 
$("#mainblock > div").length = 3