jquery选择器中的空格是什么意思?

Question

我今天在使用一些非常基本的Jquery时遇到了一个我无法解释的反应，我希望你们中有人能给我解释一下是什么导致了这些结果

我有一个DOM模型(这里简化了)

<div class="ObjectContainer">
    <div class="Object">
        <div>stuff</div>
    <div class="Object">
        <div>stuff</div>

这个想法是在最后一个对象上设置一个属性，使用下面的代码:

$('div.ObjectContainer').find('div.Object :last').attr("index", "1");

我现在明白这里的代码是不正确的，正确的查找选择器应该是'div.Object:last'，但这是我不明白的结果。当我执行第一个代码时，出现了以下情况:

<div class="ObjectContainer">
    <div class="Object">
        <div index="1">stuff</div>
    <div class="Object">
         <div>stuff</div>

有人能向我解释我的初始选择器如何设法在子节点上设置属性吗?

Answer 1

空格表示对后代的匹配。对于每个空格，您将下降(至少)一层，并将选择器应用于先前选定元素的子元素。

例如:

div.container.post

将<div>与container 和 post类匹配，而以下:

div.container .post

…将任何元素与container类的<div>派生的post类匹配。

这将匹配<div class="container"><p class="post"></p></div>，但它也将匹配任何.post，无论它嵌套得有多深:

<div class="container">
  <div>
    <div>
      <a class="post"> <!-- matched -->
    </div>
  </div>
</div>

您可以把它看作是分阶段的匹配:首先找到匹配div.container的元素，然后搜索与.post匹配的每个元素(及其所有子元素)。

在您的示例中，div.Object :last首先查找所有具有Object类的<div>标记，然后在每个标记中搜索与:last匹配的元素，即其容器中最后一个元素的任何元素。这适用于<div index="1">stuff</div>和<div>stuff</div>。

空格的工作方式与链接多个find调用的方式完全相同，所以如果你了解它是如何工作的，你就可以理解空格是如何影响选择器的。它们是相同的:

$('div#post ul.tags li');
$('div#post').find('ul.tags').find('li');

Answer 2

$('div.ObjectContainer').find('div.Object :last')导致通配符效果。它查找所有伪类为:last的子类。因此，它简单地选择了div:last。相当于$('div.ObjectContainer').find('div.Object div:last')

Answer 3

使用jQuery，你可以通过提供它的ID，类名，标签类型等来找到任何DOM对象，或者先找到父对象，然后指定你想要的嵌套子对象

例如，您可以通过以下查询

找到第一个Div对象

$('.ObjectContainer .Object:first')

jQuery选择器中的空格分隔父节点和子节点