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

Posted 2023-03-06

技术标签:

【中文标题】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> 的直接子代（或者浏览器是这样认为的）。

演示：http://jsfiddle.net/wP7uD/

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

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

<p> 标签的 W3C 规范：http://www.w3.org/TR/html-markup/p.html

【讨论】：

+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”)