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

...将 任何元素 与 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 首先找到所有带有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 psudo 类的孩子。因此它简单地选择了 div:last。相当于$('div.ObjectContainer').find('div.Object div:last')

Answer 3

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

例如，您可以找到第一个 Div。此查询的对象

$('.ObjectContainer .Object:first')

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