jQuery选择器中直接后代（＆gt;）与后代的区别是什么？

Question

这两个jQuery语句有什么区别？他们似乎通过获取所有子div标签来做同样的事情。

$("#mainblock div")

$("#mainblock > div")

Answer 1

$("#mainblock > div") =仅限孩子级别

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

Answer 2

看一下jQuery Selectors

Child Selector ("parent > child") - 层次结构选择由“父”指定的元素的“子”指定的所有直接子元素。

Descendant Selector ("ancestor descendant")- 层次结构选择作为给定祖先后代的所有元素。

Answer 3

$("#mainblock div")

这个目标是“#mainblock”里面的所有DIV，不管它是“#mainblock”的直接子，还是主块子的孩子等等。

$("#mainblock > div")

这将仅定位“#mainblock”的直接子DIV并忽略其他DIV。如果你只有直接的孩子，这个比上面快。因为它不是试图找到孩子的其他元素。

Answer 4

第一个将获得div的所有#mainblock后代。第二个将获得div

的直接子项的所有#mainblock

Answer 5

$("#mainblock div")

匹配任何作为#mainblock的后代的div元素。

$("#mainblock > div")

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

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

Answer 6

第一个将在任何级别选择任何“#mainblock”子级的div。第二个将选择任何直接孩子的div。

有关CSS >选择器的更多信息，请参阅此link，其行为与jQuery中的相同。

Answer 7

$（＆＃34; #mainblock div＆＃34;）找到#mainblock

下的所有div

$（＆＃34; #mainblock＆gt; div＆＃34;）只找到了它的孩子

假设你有以下HTML结构：

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

然后

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