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,这是一个子选择(实际上是两个).

或者,当然,他们的一些组合.