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');

Answer 2

$('div.ObjectContainer').find('div.Object :last')会导致外卡效应。它会查找psudo类为last的任何孩子：last。因此它只选择了div：last。它相当于$('div.ObjectContainer').find('div.Object div:last')

Answer 3

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

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

$('.ObjectContainer .Object:first')

因此jQuery选择器中的空格将父节点及其子节点

分开

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

3 个答案: