TOC

jQuery - Beispiel für Kinder- und Geschwisterauswahl

jQuery - Beispiel für untergeordnete und geschwisterliche Selektoren

jQuery-Unter- und Geschwister-Selektoren können in vier Selektoren unterteilt werden: Nachkommen-Selektor (A B), Unter-Selektor (A> B), benachbarter Geschwister-Selektor (A + B) und allgemeiner Geschwister-Selektor (A ~ B). Lassen Sie uns ein Beispiel durchgehen, um die Unterschiede dazwischen zu verstehen.

Erstens muss man verstehen, was Kinder und Geschwister sind. Sehen wir uns dieses Beispiel an. 

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

Alle

-Elemente, die sich unter dem
-Element befinden, sind dessen untergeordnetes Element. Und die "Person1", "Person2" und "Person3" sind in einer geschwisterlichen Beziehung.

1. Nachkommen-Selektor (A B)

Der Nachkommen-Selektor wird verwendet, um alle mit "B" übereinstimmenden Elemente auszuwählen, die Kind, Enkel, Urenkel, Ururenkel .. (alle Ebenen tief) eines "A" -Elements sind. 

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

jquery-child-sibling-example-descendant-selector

2. Kindauswahl (A> B)

Der untergeordnete Selektor wird verwendet, um alle mit "B" übereinstimmenden Elemente auszuwählen, die einem "A" -Element untergeordnet sind. 

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

jquery-child-sibling-example-child-selector

3. Angrenzender Geschwisterwähler (A + B)

Der benachbarte Geschwister-Selektor wird verwendet, um die unmittelbar folgenden oder nächsten Elemente auszuwählen, die mit „B“ übereinstimmen, das ist ein Geschwister eines „A“ -Elements. 

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

jquery-child-sibling-example-Adjacent-sibling

4. Allgemeine Geschwisterauswahl (A ~ B)

Der allgemeine Geschwister-Selektor wird verwendet, um alle Elemente auszuwählen, die mit „B“ übereinstimmen. Dies ist ein Geschwister eines „A“ -Elements. 

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

jquery-child-sibling-example-general-sibling

Ich hoffe, Sie haben jetzt mehr Verständnis für die jQuery-Selektoren.

Related