jQuery 选择器不是我所期望的

Question

使用 jQuery 1.4.2（兼容模式下的 IE8）

给定以下结构：

<div id='something'>something</div>
<div id='parental'>
    <div><p>hi there</p> goats</div>
    <p>hello again</p>
</div>
<div> end of the line</div>

和此代码：

var Fred= $('#parental');
$('div').css({color: 'blue'});
Fred.children('div').css({color: 'red'});
Fred.children('div').children('p').css({color:'green',border:'solid red 2px'});
Fred.children('div p').css({color: 'orange'});
Fred.children('div>p').css({border:'solid #FFFF00 2px'});

• “某物”和“行尾”是蓝色的，正如我所期望的
• “山羊”是红色的，正如我所期望的。
• “嗨，那里”是绿色的，带有红色边框（我希望它是橙色/黄色边框）
• “你好，再次”是橙色的，带有黄色边框（不是我所期望的）。

为什么使用 Fred.children('div p') 选择器和 Fred.children('div').children('p') 和 Fred.children('div').children('p') 呢？ Children('div>p') 没有选择相同的东西？

在这里查看它的实际效果：http://jsfiddle.net/bxAzN/

Answer 1

因为 .children() 执行以下操作：

获取匹配元素集中每个元素的子元素，可以选择通过选择器进行过滤。

现在采用div p。 #parental 的唯一子元素是 div 和 p 元素。 .children('div p') 仅匹配 p 元素，因为它有一个 div 作为祖先（#parental 本身）。但 div 子元素显然与该选择器不匹配。
您应该将 children() 视为获取此选择器过滤的所有子项，这与获取与此选择器匹配的所有后代不同。为此，您必须使用 find()。

相比之下，Fred.children('div').children('p') 首先获取 Fred 的所有 div 子级，然后选择所有div 的 p 子元素。

Answer 2

Children() 相当于执行“>”在选择器中。

jquery网站说...

仅向下移动一层
DOM树

将不起作用，因为您试图向下查看 DOM 树的两个阶段。使用 children('div>p') 确实有效，因为它实际上是 1 选择器，尽管我意识到为什么这很令人困惑。

如果您想让一个函数完成您想要做的事情，您需要查看 find()。

Answer 3

尝试更改子项以找到

var Fred= $('#parental');
$('div').css({
    color: 'blue'
});
Fred.children('div').css({
    color: 'red'
});
Fred.find('div').find('p').css({
    color: 'green',border:'solid red 2px'
});
Fred.find('div p').css({
    color: 'orange'});

Fred.find('div>p').css({
    border:'solid #FFFF00 2px'
});​

其选择相同的“嗨那里”

http://jsfiddle.net/bxAzN/2/

Children只查看节点的直接子节点，而find会遍历节点下面的整个DOM，因此children会更快。使用哪一个取决于您是否只想考虑直接后代节点或 DOM 中低于该节点的所有节点。 -tvanfosson

Children 和 find 不一定会给出相同的结果：find() 将获得任何后代节点，而 Children() 只会获得匹配的直接子节点。

因此，find() 会更慢，因为它必须搜索可能匹配的每个后代节点，而不仅仅是直接子节点。
——约翰·费米内拉