Jak zdobyć element nadrzędny w jQuery

Html

Jestem dziadkiem Element

• Jestem bezpośrednim rodzicem elementu Span
  Jestem elementem rozpiętości
  

W powyższym kodzie jest w sumie cztery elementy; ,

,
• , I . Obserwowanie ich hierarchii w powyższym
• element jest uważany za bezpośredniego rodzica elementu,
  jest dziadkiem elementu i jest prawnukiem, ponieważ wszystkie elementy są zagnieżdżone w elemencie.

  JQuery

  $ (dokument).gotowy (funkcja ()
  $ („span”).rodzic().CSS („Color”: „Purple”, „granica”: „2px solid fioletowy”);
  );

  Zastosowaliśmy metodę nadrzędną () na elemencie, a także połączyliśmy do niej metodę CSS (.

  Pewne podstawowe stylowanie jest również stosowane do tych elementów za pomocą CSS w celu lepszego demonstracji i zrozumienia.

  Wyjście

  Metoda nadrzędna () działa prawidłowo, a element nadrzędny jest udany pomyślnie.

  Metoda rodziców ()

  Metoda rodziców () działa w podobny sposób jak metoda nadrzędna () z jedyną różnicą, która zamiast pobierać bezpośrednie rodzica, przynosi wszystkich rodziców określonego elementu.

  Składnia

  $ (selektor).rodzice (filtr)

  Notatka: Parametr filtra służy do kompaktowania wyszukiwania elementu nadrzędnego poprzez określenie wyrażenia selektora i jest on opcjonalny.

  Przykład

  Aby zrozumieć koncepcję metody rodziców (), zapoznajemy się z tym samym przykładem co powyżej i użyjemy metody Parents () zamiast metody nadrzędnej () i zobaczymy, jak to działa.

  JQuery

  $ (dokument).gotowy (funkcja ()
  $ („span”).rodzice().css („color”: „fiolet”, „border”: „3px solid fioletowy”);
  );

  Powyższy kod powinien podkreślić wszystkich rodziców elementu w stylu określonym metodą CSS ().

  Wyjście

  Element podświetlony powyżej ciała to element. Metoda rodziców () również ją pobiera, ponieważ jest również rodzicem określonego elementu.

  Metoda ParentIntil ()

  Aby pobrać elementy nadrzędne między dwoma określonymi elementami, stosuje się metodę rodzica ().

  Składnia

  $ (selektor).ParentIntil (stop, filtr)

  Notatka: Parametr filtra ma taką samą funkcję jak metoda nadrzędna () i rodziców (), jednak parametr stopu jest używany do oznaczenia elementu, w którym powinien zatrzymać wyszukiwanie elementów nadrzędnych. Oba parametry są opcjonalne.

  Przykład

  Ten przykład ilustruje działanie metody paryntil ().

  Html

  Ciało (prawnuczka)
  Div (dziadek)
  
  UL (bezpośredni rodzic)
  
  • Li
    Zakres
    
  
  
  
  
  

  Stworzyliśmy div i wnętrze tego div zagnieżdżliśmy trzy elementy, które są

  ,
  • , I .

    JQuery

    $ (dokument).gotowy (funkcja ()
    $ („li”).Paymesuntil („Body”).css („color”: „niebieski”, „border”: „2px solid blue”);
    );

    W powyższym kodzie wybraliśmy

  • element i użył metody rodzicielskiej () do znalezienia wszystkich rodziców między
  • , i elementy.

    Wyjście

    Jak widać na wynikach, wszyscy rodzice

  • (div i ul), wcześniej zostali wyróżnieni.

    Metoda najbliższa ()

    Metoda najbliższa () pobiera pierwszy element, który pasuje do określonego elementu.

    Składnia

    $ (selektor).najbliższy (filtr, kontekst)

    Notatka: Parametr filtra ma taką samą funkcjonalność jak w innych metodach, jednak jest to wymagane w tej metodzie. Z drugiej strony parametr kontekstowy jest opcjonalny i określa element DOM, w którym należy znaleźć dopasowanie.

    Przykład

    Ten przykład ilustruje działanie metody najbliższej ().

    ciało (prapradziadek)
    Div (pradziadek/dziadek)
    
    UL (drugi przodek/drugi dziadek)
    
    UL (pierwszy przodek/pierwszy dziadek)
    
    • Li (bezpośredni rodzic)
      Zakres
      
    
    
    
    
    
    
    

    Stworzyliśmy div i wnętrze tego div zagnieżdżliśmy dwa

    elementy i jeden
    • , element.

      JQuery

      $ (dokument).gotowy (funkcja ()
      $ („span”).najbliżej („ul”).css („color”: „niebieski”, „border”: „2px solid blue”);
      );

      Zastosowaliśmy metodę najbliższą (), aby podkreślić pierwszego przodka elementu.

      Wyjście

      Jak wskazano na wyjściu, drugi

      Element jest pierwszym przodkiem elementu.

      Za pomocą wyżej wymienionych metod można pobrać elementy nadrzędne określonego elementu HTML.

      Wniosek

      Aby pobrać element nadrzędny w jQuery poprzez stosowanie metod takich jak, rodzic (), rodziców (), rodziciel () i najbliższy (). Metoda nadrzędna () pobiera bezpośredni rodzic elementu, metoda rodziców () pobiera wszystkich rodziców elementu, rodziciel () znajduje elementy nadrzędne między dwoma określonymi elementami, a metoda najbliższa () pobiera pierwszy element, który pasuje do określonego element. Wszystkie te metody, wraz z ich odpowiednimi przykładami, są wyjaśnione w tym przewodniku.