jQuery 选择器中的直接后代 (>) 与后代有什么区别？答案

【问题标题】：What is the difference direct descendent (>) vs. descendant in jQuery selectors?jQuery 选择器中的直接后代 (>) 与后代有什么区别？
【发布时间】：2012-04-30 16:13:57
【问题描述】：

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

$("#mainblock div")

$("#mainblock > div")

【问题讨论】：

我不同意这个问题被关闭为“太狭窄”。这些天每个人都在使用 jquery，我敢打赌大多数用户无法给你这个问题的答案。这怎么太狭窄/本地化了？

标签： jquery css jquery-selectors

【解决方案1】：

第一个将得到#mainblock 的所有divs 后代。第二个将获取所有divs 是#mainblock 的直系子级

【讨论】：

【解决方案2】：

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

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

【讨论】：

如果你要找的节点是mainblock的父节点，最好使用>。除了更精确之外，它也更快。

【解决方案3】：

看看 jQuery Selectors

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

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

【讨论】：

【解决方案4】：

$("#mainblock div")

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

$("#mainblock > div")

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

$("#mainblock div")

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

$("#mainblock > div")

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

【讨论】：

【解决方案7】：

$("#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

【讨论】：