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：LA st'，但这是我不明白的结果。当我执行的第一个代码发生这种情况：

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

有人能向我解释，我最初的选择是如何设法设置一个子节点上的属性？

Answer 1

空格表示与后代匹配。对于每个空间，您都要下降（至少）一个级别，并将选择器应用于之前选定元素的子元素。

例如：

div.container.post 

将匹配与container和post班<div>，而以下几点：

div.container .post 

...将匹配任何元素带班post，其从<div>下降，具有container的等级。

这将匹配<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首先找到所有<div>标签与Object类，然后在每个那些匹配: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')导致通配符效果。它会查找任何有psudo类的孩子：last。因此它简单地选择了div：最后。相当于$('div.ObjectContainer').find('div.Object div:last')

Answer 3

使用jQuery，您可以通过提供它的ID，类名，标签类型等，或只是寻父第一个，然后指定嵌套的孩子，你要

对于发现任何DOM OBJ例如，你可以找到第一个Div。此查询

$('.ObjectContainer .Object:first') 

对象，以便在jQuery选择空间父节点分离和它的孩子