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

这两个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") – Hierarchy选择作为给定祖先后代的所有元素。

Answer 3

 $("#mainblock div") 

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

 $("#mainblock > div") 

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

Answer 4

第一个将获得#mainblock所有div后代。 第二个将获得#mainblock直接子#mainblock所有div

Answer 5

 $("#mainblock div") 

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

 $("#mainblock > div") 

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

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

Answer 6

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

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

Answer 7

$（“＃mainblock div”）找到#mainblock下的所有div

$（“＃mainblock> div”）只找到了它的孩子

假设你有以下HTML结构：

然后

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