jquery 选择器混淆 - $('div p') vs $('div>p')答案

【问题标题】：jquery selector confusion - $('div p') vs $('div>p')jquery 选择器混淆 - $('div p') vs $('div>p')
【发布时间】：2013-04-07 23:58:47
【问题描述】：

我正在尝试学习 jquery 并有一个问题 -

页面上的 div 元素看起来像 -

<div id ="1">
    <p id="first"> one 
        <p id="second"> one.one 
            <p id="third"> one.one.one </p>
        </p>
    </p>
</div>

以下两个选择器都给了我相同的结果 -

  $('div p').css({'background-color' : 'blue'}); 

  $('div>p').css({'background-color' : 'blue'});

第二个选择器不应该只返回<div>元素的第一个<p>标签吗？

【问题讨论】：

这不是真正的 jquery 问题，而是一个 css 选择器问题。以下是有关它们的更多信息：developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors
CSS '>' selector; what is it?的可能重复
请注意，“正确”的做法（从速度/效率的角度来看）是$('div').find('p')。这总是比 CSS 选择器方法快。 jsperf.com/jquery-find-vs-css-selector2/2
<p> 标签的结束标签是可选的。您的代码被解析为<div><p>one</p><p>one.one</p>...。文档：w3.org/TR/html-markup/p.html#p-tags
@Rocket：对...我在想p 元素不能嵌套，浏览器应该更正它，但我没有费心测试...将删除我的评论，谢谢（和 +1）。

【解决方案1】：

$('div p') 选择 all <p> 标记是<div> 的后代。

$('div>p') only 选择作为<div> 的直接子代的<p> 标签。

您的代码中发生的情况是，由于结束 </p> 标记是可选的，浏览器正在读取您的 HTML，因为它有 3 个 <p>（实际上是 5 个，因为最后 2 个结束标记是“误读”）标签都是兄弟姐妹。

所以，它被解读为：

<div id ="1">
    <p id="first"> one</p> 
    <p id="second"> one.one</p>
    <p id="third"> one.one.one</p>
    <p></p>
    <p></p>
</div>

这就是为什么他们都变成了蓝色。 $('div>p') 匹配它们，因为它们都是 <div> 的直接子代（或者浏览器是这样认为的）。

_{打开浏览器的开发工具并检查 DOM，你会看到有 5 个<p> 标签。}

寓意：您不能将<p> 标签作为<p> 标签的子标签。

【讨论】：

+1 因为其他人都在解释> 做了什么（OP 似乎已经理解了），而不是为什么他们得到这个结果。
@FelixKling：在 OP 的问题中，他说他希望 $('div>p') 只返回第一个元素。如果不是因为<p> 标签很奇怪，他会是对的。另外，我通常是这样回答的；解释 为什么 OP 得到他的结果。 :-D

【解决方案2】：

所有<p> 都是第一个<p> 元素的子元素。

【讨论】：

不幸的是，他们不是。 </p>s 是可选的，所以他的代码读作<div><p>one</p><p>one.one</p>...。 <p> 标签不能是 <p> 标签的子标签。 w3.org/TR/html-markup/p.html#p-tags
@RocketHazmat 无效？是的。 OP引用了什么？是的。

【解决方案3】：

$("div>p") 被称为 Child Selector (“parent > child”)

选择“parent”指定的元素的“child”指定的所有直接子元素。
$("div p") 被称为 Descendant Selector (“ancestor descendant”)

选择作为给定祖先的后代的所有元素。

【讨论】：

【解决方案4】：

div > p 表示div 的第一级p 子级。和div p 暗示p 的孩子div 在div 的后代中的任何地方

【讨论】：

【解决方案5】：

div p

匹配在div内的所有p元素，无论它们有多深。

div > p

匹配所有p 元素div 的直接子元素

您的问题是 HTML。不允许将p 嵌套在另一个p 中；浏览器会自动关闭第一个 p，然后再呈现新的。

【讨论】：