Hvordan få foreldreelement i jQuery

Html

Jeg er besteforeldre til spennelementet

• Jeg er direkte foreldre til Span Element
  Jeg er spennelementet
  

Det er totalt fire elementer generert i koden ovenfor, som er; ,

,
• , og . Observerer hierarkiet deres i ovennevnte
• Element blir sett på som en direkte forelder av elementet,
  er besteforeldre til elementet, og er oldeforeldrene fordi alle elementene er nestet inne i elementet.

  jQuery

  $ (dokument).klar (funksjon ()
  $ ("Span").foreldre ().CSS ("Color": "Purple", "Border": "2px solid lilla");
  );

  Vi har brukt foreldremetoden () på elementet og lenket også CSS () -metoden til den for å fremheve den direkte forelderen til elementet og bekrefte at overordnede element er tilgjengelig med suksess.

  Noe grunnleggende styling brukes også på disse elementene ved bruk av CSS for bedre demonstrasjon og forståelse.

  Produksjon

  Foreldre () -metoden fungerer som den skal, og foreldreelementet er tilgjengelig med hell.

  Foreldre () Metode

  Foreldrene () -metoden fungerer på en lignende måte som foreldre () -metoden med den eneste forskjellen som i stedet for å hente den direkte forelderen den henter alle foreldrene til det spesifiserte elementet.

  Syntaks

  $ (velger).Foreldre (filter)

  Merk: Filterparameteren brukes til å kompakte søket etter overordnet element ved å spesifisere et velgeruttrykk, og det er valgfritt.

  Eksempel

  For å forstå konseptet med foreldrene () metoden, vil vi konsultere det samme eksemplet som ovenfor og bruke foreldrene () metoden i stedet for foreldremetoden () og se hvordan det fungerer.

  jQuery

  $ (dokument).klar (funksjon ()
  $ ("Span").foreldre().CSS ("Color": "Purple", "Border": "3px solid lilla");
  );

  Ovennevnte kode skal fremheve alle foreldrene til elementet i stilen som er spesifisert av CSS () -metoden.

  Produksjon

  Elementet som er fremhevet over kroppen er elementet. Foreldrene () -metoden henter den også siden den også er en forelder av det spesifiserte elementet.

  Parentil () -metode

  For å hente foreldreelementer mellom to spesifiserte elementer, brukes Parentuntil () -metoden.

  Syntaks

  $ (velger).Parentil (stopp, filter)

  Merk: Filterparameteren har samme funksjon som for foreldre () og foreldre () -metoden, men stoppparameteren brukes til å betegne elementet som søket etter foreldreelementer skal stoppe. Begge parametrene er valgfrie.

  Eksempel

  Dette eksemplet illustrerer arbeidet med Parentuntil () -metoden.

  Html

  Body (oldeforeldre)
  div (besteforeldre)
  
  UL (direkte foreldre)
  
  • li
    spenn
    
  
  
  
  
  

  Vi har laget en div og inni den diven vi har nestet tre elementer som er

  ,
  • , og .

    jQuery

    $ (dokument).klar (funksjon ()
    $ ("li").Parentil ("Body").CSS ("Color": "Blue", "Border": "2px Solid Blue");
    );

    I koden ovenfor har vi valgt

  • element og brukte Parentuntil () -metoden for å finne alle foreldrene mellom
  • , og elementer.

    Produksjon

    Som det kan sees i produksjonen, alle foreldrene til

  • (div og ul), før har blitt fremhevet.

    nærmest () -metode

    Den nærmeste () -metoden henter det første elementet som samsvarer med det spesifiserte elementet.

    Syntaks

    $ (velger).nærmest (filter, kontekst)

    Merk: Filterparameteren har samme funksjonalitet som i andre metoder, men det er nødvendig i denne metoden. Kontekstparameteren er derimot valgfritt, og spesifiserer et DOM -element som en matching skal bli funnet.

    Eksempel

    Dette eksemplet illustrerer arbeidet med nærmeste () -metode.

    Body (oldeforeldre)
    div (stor/besteforeldre)
    
    UL (andre stamfar/andre besteforeldre)
    
    UL (første stamfar/første besteforeldre)
    
    • Li (direkte foreldre)
      spenn
      
    
    
    
    
    
    
    

    Vi har laget en div og inni den diven vi har nestet to

    elementer, og en
    • , element.

      jQuery

      $ (dokument).klar (funksjon ()
      $ ("Span").nærmest ("UL").CSS ("Color": "Blue", "Border": "2px Solid Blue");
      );

      Vi har brukt den nærmeste () -metoden for å fremheve den første stamfaren til elementet.

      Produksjon

      Som det påpekes i utgangen, den andre

      elementet er første stamfar til elementet.

      Ved hjelp av de ovennevnte metodene kan du hente overordnede elementer i et spesifisert HTML-element.

      Konklusjon

      Å hente foreldreelementet i jQuery ved å bruke metoder som, foreldre (), foreldre (), Parentuntil () og nærmest (). Foreldre () -metoden henter den direkte forelderen til et element, foreldre () -metode henter alle foreldrene til et element, foreldre () finner foreldreelementer mellom to spesifiserte elementer, og nærmeste () -metoden henter det første elementet som samsvarer med den spesifiserte element. Alle disse metodene, sammen med deres relevante eksempler, er forklart i denne guiden.