jQuery 嵌套 DOM 选择器答案

【问题标题】：jQuery nested DOM selectorjQuery 嵌套 DOM 选择器
【发布时间】：2013-03-04 10:02:40
【问题描述】：

假设我有以下 HTML 元素：

<div id="id">
    <div class="first">
        <div class="second"></div>
    </div>
</div>

我想知道为什么这在 jQuery 中不起作用：

$("#id.first.second").click( // do some stuff ...

我通常使用类似下面的东西，但今天我发现上面的例子不起作用。

// working example
$("#id .second").click( // do some stuff ...

更新：我的问题是为什么没有空格就不能工作？谢谢！

【问题讨论】：

【解决方案1】：

选择器#id.first.second 的意思是“具有id 值"id" 的元素，也具有first 和second 类”。

您的第二个选择器#id .second（.second 之前的空格）表示“具有id 值"id" 的元素，它具有类second 的后代元素”。这是一个“后代选择器”。

因此，如果您想指定三个级别中的每一个，您可以这样做：

$("#id .first .second").click(...

...表示“具有id 值"id" 的元素，它有一个类first 的descendant 元素，而类first 又具有一个descendant 具有类second"的元素。

或者，您可以这样做：

$("#id > .first > .second").click(...

...表示“具有id 值"id" 的元素，它有一个direct 子 元素，其类first 又具有一个direct具有second 类的子元素。它是一个子选择器（实际上是其中两个）。

或者，当然，它们的某种组合。

【讨论】：

【解决方案2】：

这将起作用：

$("#id .first .second").click( // do some stuff ...

对于您的第一个选择器，它将搜索：

<div id="id" class="first second">
</div>

说明

您的第一个选择器正在寻找一个 id 为 id 且具有类 first 和 second 的元素。

但您实际上想查找类为 second 的元素，该元素是类为 first 的元素的后代，它又是 ID 为 id 的元素的后代

【讨论】：

正确。原来的选择器在 jQuery 中不起作用，因为它在 CSS 中不起作用。
@ÁlvaroG.Vicario 原始选择器不起作用，因为它与页面的 DOM 结构不匹配。这是你的意思吗？说它“在 CSS 中不起作用”是不正确的，因为它是一个有效的选择器（只是不适用于他们页面上的任何元素）。
@AnthonyGrist - 是的，这就是我的意思：它不像 OP 所期望的那样工作。 jQuery 选择器基于 CSS 选择器。
我不认为这是 100% 正确的描述。 jQuery 选择器基于 Sizzle 引擎 (sizzlejs.com)，它支持几乎所有 CSS 3 选择器：github.com/jquery/sizzle/wiki/Sizzle-Documentation

【解决方案3】：

选择器之间的空格表示“任何后代”：可以选择直接子代和这些子代的子代。

所以$('#id .first .second') 这意味着在div 中获取DOM 的id 为id 并获取后代DOM 与class 名称为first 及其后代DOM 与@ 987654327@ 第二个的名称。

【讨论】：

【解决方案4】：

您需要在这里使用jQuery descendant 选择器。您需要在父选择器和子选择器之间留出一个空格。

如果您指定没有空格的扇区，它将被视为一个和条件。在您的情况下，它将查找 id 为 id 并具有类 first 和 second 的元素。例如：<div id="id" class="first second"></div>

$("#id.first.second") 应该是$("#id .first .second")

【讨论】：

【解决方案5】：

用空格分隔选择器以查找后代。

$("#id .first .second").click(function(){
   alert("Hello");
});

原来的选择器试图找到一个id为id的元素，first的类和second的类。

【讨论】：

【解决方案6】：

在它们之间放置空格：

$("#id .first .second").click( // do some stuff ...

见：

$("#id.first.second").click( // do some stuff ...

这是在寻找一些类的 id，例如：

<div id='id' class='first second'></div>

【讨论】：