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

Question

我正在尝试学习 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'});

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

score 5 · Accepted Answer

$('div p')选择作为 a 的后代的所有标签。<p><div>

$('div>p') 仅选择<p>作为 a 的直接子级的标签<div>。

您的代码中发生的情况是，由于结束</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>。

score 2 · Accepted Answer

div p

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

div > p

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

您的情况有什么问题是HTML。不允许p嵌套在另一个内部p；p浏览器在呈现新的之前会自动关闭第一个。

score 2 · Accepted Answer

2

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

于 2013-04-15T18:43:57.363 回答

score 2 · Accepted Answer

div > p表示的第一级p子级div。并div p暗示任何地方的p孩子divdiv

score 2 · Accepted Answer

5 回答 5