TOC

jQuery - Exemple de sélecteurs d’enfants et de frères et soeurs

jQuery - Exemple de sélecteurs enfants et frères

jLes sélecteurs enfant et frère peuvent être divisés en quatre sélecteurs, sélecteur descendant (A B), sélecteur enfant (A> B), sélecteur frère adjacent (A + B) et sélecteur frère général (A ~ B). Passons en revue un exemple pour comprendre les différents entre les deux.

Tout d'abord, vous devez comprendre ce que sont l'enfant et le frère. Voyons cet exemple, 

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

Tous les éléments

qui sous l'élément
sont son enfant. Et la «personne1», «personne2» et «personne3» sont dans une relation fraternelle.

1. Sélecteur descendant (A B)

Le sélecteur descendant est utilisé pour sélectionner tous les éléments correspondant à «B» qui sont enfant, petit-enfant, arrière-petit-enfant, arrière-arrière-petit-enfant .. (n'importe quel niveau de profondeur) d'un élément «A». 

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

jquery-child-sibling-example-descendant-selector

2. Sélecteur d'enfant (A> B)

Le sélecteur enfant est utilisé pour sélectionner tous les éléments correspondant à «B» qui sont enfants d'un élément «A». 

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

jquery-child-sibling-example-child-selector

3. Sélecteur de frère adjacent (A + B)

Le sélecteur de frère adjacent est utilisé pour sélectionner les éléments immédiatement suivis ou suivants correspondant à "B" qui est le frère d'un élément "A". 

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

jquery-child-sibling-example-Adjacent-sibling

4. Sélecteur général de frères et sœurs (A ~ B)

Le sélecteur de frère général est utilisé pour sélectionner tous les éléments correspondant à «B» qui est le frère d'un élément «A». 

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

jquery-child-sibling-example-general-sibling

J'espère que vous en savez plus sur les sélecteurs jQuery maintenant.

Related