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

jQueryの子セレクタと子孫セレクタは、子孫セレクタ(A B)、子セレクタ(A> B)、隣接兄弟セレクタ(A B)、および一般兄弟セレクタ(A〜B)の4つのセレクタに分割できます。間の違いを理解するための例を見てみましょう。

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

<h1>Child and Sibling Selectors example</h1>
<div class="person1">
    <div class="child">
        <div class="grandchild">
            <div class="great-grandchild">
                I'm the great grandchild.
            </div>
            I'm the grandchild.
        </div>
        I'm the first child.
    </div>

    <div class="child">
        I'm the second child.
    </div>

    <div class="child">
        I'm the third child.
    </div>
    I'm person1
</div>
<p class="person2">I'm person2</p>
<p class="person3">I'm person3</p>

jquery-child-sibling-example、title = "jquery-child-sibling-example-1"]

<div class = "person1">要素の下にあるすべての<div>要素はその子要素です。 "person1"、 "person2"、 "person3"は兄弟関係にあります。

1.降順セレクタ(A B)

子孫セレクタは、 "A"要素の子、孫、曾孫、孫、孫、孫のすべての要素を選択するために使用されます。

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

jquery-child-sibling-example-descendant-selector、title = "jquery-child-sibling-example -descendant-selector "]

2.子セレクタ(A> B)

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

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

jquery-child-sibling-example-child-selector、title = "jquery-child-sibling-example" -child-selector "]

3.隣接する兄弟セレクタ(A B)

隣接する兄弟セレクタは、「A」要素の兄弟である「B」によってマッチした直後または次の要素を選択するために使用されます。

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

jquery-child-sibling-example-Adjacent-sibling、title = "jquery-child-sibling-example" - 隣接兄弟 "]

4.一般的な兄弟セレクタ(A〜B)

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

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

jquery-child-sibling-example-general-sibling、title = "jquery-child-sibling-example -general-sibling "

jQueryセレクタについてもっと理解していただきたいと思います。