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'});

“某事”和“行尾”是我想象中的蓝色
“山羊”是我所期望的红色。
“hi there”是带有红色边框的绿色（我希望它是橙色/黄色边框）
“你好再次”是橙色的黄色边框（不是我的预期）。

为什么Fred.children('div p')选择器以及Fred.children('div').children('p')和Fred.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')首先接纳div的所有Fred个孩子，然后选择所有div个p个孩子。

Answer 2

children（）是做“＆gt;”的等价物在选择器中。

jquery网站说它......

只能走一层 DOM树

因此使用children('div p')将无效，因为您试图在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'
});

选择相同的“hi there”

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

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

两个孩子和find都不一定会得到相同的结果：find（）会得到任何后代节点，而children（）只会让你的孩子匹配。

因此，find（）会慢一些，因为它必须搜索可能匹配的每个后代节点，而不仅仅是直接子节点。 -John Feminella

jQuery选择器不是我所期望的

3 个答案: