TOC

jQuery - пример селекторов для детей и братьев и сестер

jQuery - пример выбора дочерних элементов и дочерних элементов

Селекторы дочерних и родных элементов jQuery можно разделить на четыре селектора: селектор потомков (A B), селектор дочерних (A> B), селектор смежных братьев и сестер (A + B) и селектор общих сестер (A ~ B). Давайте рассмотрим пример, чтобы понять разницу между ними.

Во-первых, вы должны понять, что такое ребенок и брат и сестра. Давайте посмотрим на этот пример, 

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)

Селектор потомков используется для выбора всех элементов, соответствующих «B», которые являются дочерним элементом, внуком, правнуком, пра-пра-внуком… (любого уровня по глубине) элемента «A». 

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

jquery-child-sibling-example-descendant-selector

2. Детский селектор (A> B)

Дочерний селектор используется для выбора всех элементов, соответствующих «B», которые являются дочерними по отношению к «A» элементу. 

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

jquery-child-sibling-example-child-selector

3. Селектор соседнего брата (A + B)

Селектор смежного родного брата используется для выбора элементов, следующих непосредственно за последующим или следующим, которые соответствуют «B», который является родственным элементом «A». 

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

jquery-child-sibling-example-Adjacent-sibling

4. Общий выбор родного брата (A ~ B)

Общий селектор брата используется для выбора всех элементов, соответствующих «B», который является родственным элементом «A». 

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

jquery-child-sibling-example-general-sibling

Надеюсь, теперь вы лучше разбираетесь в селекторах jQuery.

Related