TOC

jQuery - 子と兄弟セレクタの例

jQuery –子および兄弟セレクターの例

jQueryの子および兄弟セレクターは、子孫セレクター（A B）、子セレクター（A> B）、隣接する兄弟セレクター（A + B）、および一般的な兄弟セレクター（A〜B）の4つのセレクターに分割できます。 例を見て、その間の違いを理解しましょう。

まず、子供と兄弟とは何かを理解する必要があります。 この例を見てみましょう。 

Child and Sibling Selectors example



    

        

            

                I'm the great grandchild.
            

            I'm the grandchild.
        

        I'm the first child.
    


    

        I'm the second child.
    


    

        I'm the third child.
    

    I'm person1



I'm person2


I'm person3

jquery-child-sibling-example

要素の下にあるすべての
要素はその子です。 そして、「person1」、「person2」、「person3」は兄弟関係にあります。

1. 子孫セレクター（A B）

子孫セレクターは、「A」要素の子、孫、great孫、great孫のすべてである「B」に一致するすべての要素を選択するために使用されます。 

$(".person1 div").css("border", "2px solid red");

jquery-child-sibling-example-descendant-selector

2. 子セレクター（A> B）

子セレクターは、「A」要素の子である「B」に一致するすべての要素を選択するために使用されます。 

$(".person1 > div").css("border", "2px solid red");

jquery-child-sibling-example-child-selector

3. 隣接する兄弟セレクター（A + B）

隣接する兄弟セレクタは、「A」要素の兄弟である「B」と一致する直後または次の要素を選択するために使用されます。 

$(".person1 + p").css("border", "2px solid red");

jquery-child-sibling-example-Adjacent-sibling

4. 一般的な兄弟セレクター（A〜B）

一般的な兄弟セレクターは、「A」要素の兄弟である「B」と一致するすべての要素を選択するために使用されます。 

$(".person1 ~ p").css("border", "2px solid red");

jquery-child-sibling-example-general-sibling

jQueryセレクターについてもっと理解していただければ幸いです。

Related