jquery - jQuery 嵌套 DOM 选择器

Question

假设我有以下 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 ...

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

Answer 1

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

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

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

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

...这意味着“具有id值的元素具有类"id"的后代元素，而该类first又具有类的后代元素second”。

或者，您可以这样做：

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

...这意味着“具有id值的元素与类"id"具有直接子first元素，而该类又具有具有类的直接子元素second。它是一个子选择器（实际上是其中两个）。

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

Answer 2

这将起作用：

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

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

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

解释

您的第一个选择器正在寻找一个 idid具有 classesfirst和second.

但是你实际上想寻找一个带有 class的元素，它是second一个带有 class 的元素的后代，它又first是一个带有 id 的元素的后代id

Answer 3

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

因此，$('#id .first .second')这意味着使用 id 的 id获取DOM内部，并获取名称为first的后代及其名称为second的后代。divDOMclassDOMclass

Answer 4

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

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

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

Answer 5

在它们之间放置空格：

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

看：

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

这是在寻找具有某些类的 id，例如：

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

Answer 6

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

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

原始选择器试图找到一个元素，其 id 为idclass offirst和 class of second。