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

Question

我今天在使用一些非常基本的 Jquery 时遇到了一种无法解释的 react ，我希望你们中的一个人可以向我解释是什么导致了这些结果

所以我有一个 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

...将与类 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');