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選擇空間父節點分離和它的孩子