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

Question

我今天遇到了一个我无法解释的反应,今天和一些非常基本的Jquery合作,我希望你们中的一个能够向我解释导致这些结果的原因是什么

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

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

我们的想法是使用以下代码在最后一个Object上设置一个属性:

$('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

...将匹配任何元素与从类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');