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>

<强>解释

您的第一个选择器正在查找标识id且first和second的元素。

但实际上你想要查找一个类second的元素，它是一个带有类first的元素的后代，它又是一个标识为id的元素的后代

Answer 3

选择器之间的空格意味着“的任何后代：直接儿童和这些孩子的子女可以被选中。

所以$('#id .first .second')这意味着获取id为id的DOM内div，DOM名称第一个及其后代class，DOM名称第二。

Answer 4

您需要在此处使用jQuery descendant 选择器。您需要在父选择器和子项之间给出一个空格。

如果指定没有空格的扇区，则将其视为条件。在您的情况下，它会查找标识为id且元素为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 first类second和{{1}}类的元素。