19

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

$("#mainblock div")

$("#mainblock > div")
4

7 回答 7

22

$("#mainblock > div")=孩子的唯一级别

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

于 2012-04-19T07:05:14.393 回答
6

看看 jQuery选择器

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

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

于 2012-04-19T07:05:21.563 回答
5 
$("#mainblock div")

这一目标针对“#mainblock”内的所有DIV，无论它是“#mainblock”的直接子代，还是主块的子代的子代等等。

$("#mainblock > div")

这将仅针对“#mainblock”的直接子 DIV，而忽略其他 DIV。如果您只有直接的孩子，这个比上面更快。因为它不是试图在孩子的其他元素中找到。

于 2012-04-19T07:19:37.177 回答
3

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

于 2012-04-19T07:05:12.093 回答
3

$("#mainblock div") 查找#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
于 2016-04-22T13:01:46.720 回答
2 
$("#mainblock div")

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

$("#mainblock > div")

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

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

于 2012-04-19T07:06:30.807 回答
1

第一个将选择任何级别的 `#mainblock' 子级的任何 div。第二个将选择任何直接子级的 div。

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

于 2012-04-19T07:06:49.683 回答