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 ...

更新：私の質問は、なぜスペースなしでは機能しないのですか？ありがとう！

score 7 · Accepted Answer

セレクターとは、「クラスと」も持つ値を#id.first.second持つ要素を意味します。id"id"firstsecond

2番目のセレクター#id .second（の前にスペースがある）は、「クラスの子孫要素を持つ値を持つ.second要素」を意味します。それは「子孫セレクター」です。id"id"second

したがって、3 つのレベルのそれぞれを指定する場合は、次のようにします。

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

...これは、「クラスを持つ子孫id要素を持つ値"id"を持つ要素、さらにクラスを持つ子孫要素を持つ要素」を意味します。firstsecond

または、次のようにすることもできます。

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

...これは、「 class を持つ直接の子id要素を持つ値"id"を持つ要素、つまり classを持つ直接の子要素を持つ要素。これは子セレクター(実際にはそのうちの 2 つ) です。firstsecond

または、もちろん、それらのいくつかの組み合わせ。

score 2 · Accepted Answer

これはうまくいきます：

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

最初のセレクターでは、次を検索します。

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

説明

最初のセレクターは、idクラスfirstおよびを持つ ID を持つ要素を探していsecondます。

しかし、実際には、id を持つ要素の子孫であるsecondclass を持つ要素の子孫であるclass を持つ要素を探したいと考えています。firstid

score 1 · Accepted Answer

セレクター間のスペースは、「の任意の子孫」を意味します。直接の子およびそれらの子の子を選択できます。

したがって$('#id .first .second')、これはid の id でDOM内部を取得し、 firstの名前で子孫を取得し、 secondの名前でその子孫を取得することを意味します。divDOMclassDOMclass

score 0 · Accepted Answer

ここではjQuery 子孫セレクターを使用する必要があります。親セレクターと子セレクターの間にスペースを空ける必要があります。

スペースなしでセクターを指定すると、and 条件と見なされます。あなたの場合、idを持つ要素を探しid、クラスfirstとsecond. 元：<div id="id" class="first second"></div>

$("#id.first.second")する必要があります$("#id .first .second")

score 0 · Accepted Answer

それらの間にスペースを入れてください：

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

見る：

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

これは、次のようないくつかのクラスの ID を探しています。

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

score 0 · Accepted Answer

子孫を見つけるには、セレクターをスペースで区切ります。

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

元のセレクターは、のidクラスの id とのクラスを持つ要素を見つけようとしました。firstsecond