So erhalten Sie übergeordnetes Element in jQuery

Html

Ich bin Großelternteil des Span -Elements

• Ich bin direkter Elternteil des Span -Elements
  Ich bin das Span -Element
  

Es gibt insgesamt vier Elemente, die im obigen Code generiert werden, die sind; ,

,
• , Und . Beobachtung ihrer Hierarchie in der oben genannten
• Element wird als direkter Elternteil des Elements angesehen,
  ist der Großelternteil des Elements und der Urgroßeltern, weil alle Elemente im Element verschachtelt sind.

  JQuery

  $ (Dokument).Ready (function ()
  $ ("span").Elternteil().CSS ("Farbe": "lila", "Grenze": "2px fest lila");
  );

  Wir haben die Parent () -Methode auf das Element angewendet und auch die CSS () -Methode angekettet, um den direkten Elternteil des Elements hervorzuheben und zu überprüfen, ob das übergeordnete Element erfolgreich zugegriffen wird.

  Auf diesen Elementen wird auch ein gewisses grundlegendes Styling unter Verwendung von CSS angewendet, um eine bessere Demonstration und ein besseres Verständnis zu erhalten.

  Ausgang

  Die Parent () -Methode funktioniert ordnungsgemäß und auf das übergeordnete Element wird erfolgreich zugegriffen.

  Eltern () Methode

  Die methodische methode der Eltern () funktioniert in ähnlicher Weise wie die Mutter () mit dem einzigen Unterschied, dass sie alle Eltern des angegebenen Elements anstatt den direkten Elternteil zu holen, anstatt das direkte Eltern zu holen.

  Syntax

  $ (Selektor).Eltern (Filter)

  Notiz: Der Filterparameter wird verwendet, um die Suche nach übergeordnetem Element durch Angabe eines Selektorausdrucks zu verdichten. Es ist optional.

  Beispiel

  Um das Konzept der methodischen Eltern () () zu verstehen, werden wir dasselbe Beispiel wie oben konsultieren und die methode der Eltern () anstelle der Parent () -Methode verwenden und sehen, wie sie funktioniert.

  JQuery

  $ (Dokument).Ready (function ()
  $ ("span").Eltern().CSS ("Farbe": "lila", "Grenze": "3px fest lila");
  );

  Der obige Code sollte alle Eltern des Elements in dem von der CSS () -Methode angegebenen Stil hervorheben.

  Ausgang

  Das über dem Körper hervorgehobene Element ist das Element. Die Eltern () () Methode holt es auch ab, da es sich auch um ein Elternteil des angegebenen Elements handelt.

  Elterntil () Methode

  Um übergeordnete Elemente zwischen zwei festgelegten Elementen zu holen.

  Syntax

  $ (Selektor).Eltern (Stopp, Filter)

  Notiz: Der Filterparameter hat die gleiche Funktion wie die Methode übergeordnet () und Eltern (). Der Stop -Parameter wird jedoch verwendet, um das Element zu bezeichnen, bei dem die Suche nach übergeordneten Elementen anhalten sollte. Beide Parameter sind optional.

  Beispiel

  Dieses Beispiel veranschaulicht die Arbeit von ParentUtuntil () Methode.

  Html

  Körper (Urgroßeltern)
  Div (Großeltern)
  
  ul (direkter Elternteil)
  
  • li
    Spanne
    
  
  
  
  
  

  Wir haben ein Div erstellt und in diesem Div haben wir drei Elemente verschachtelt, die sind

  ,
  • , Und .

    JQuery

    $ (Dokument).Ready (function ()
    $ ("li").Eltern ("Körper").CSS ("Farbe": "Blue", "Border": "2PX Solid Blue");
    );

    Im obigen Code haben wir die ausgewählt

  • Element und verwendete die methodische Mutter (), um alle Eltern zwischen den zu finden
  • , und Elemente.

    Ausgang

    Wie in der Ausgabe zu sehen ist, alle Eltern von

  • (Div und UL) wurden zuvor hervorgehoben.

    eng () Methode

    Die methodische Methode wird das erste Element abgerufen, das dem angegebenen Element entspricht.

    Syntax

    $ (Selektor).am nächsten (Filter, Kontext)

    Notiz: Der Filterparameter hat die gleiche Funktionalität wie bei anderen Methoden, es ist jedoch in dieser Methode erforderlich. Der Kontextparameter hingegen ist optional und gibt ein DOM -Element an, in dem eine Übereinstimmung gefunden werden sollte.

    Beispiel

    Dieses Beispiel veranschaulicht die Arbeit der methodischen Methode ().

    Körper (Ur-Ur-Großeltern)
    Div (Urgroßeltern)
    
    UL (zweiter Vorfahr/zweiter Großelternteil)
    
    UL (erster Vorfahr/erster Großelternteil)
    
    • li (direkter Elternteil)
      Spanne
      
    
    
    
    
    
    
    

    Wir haben eine DIV geschaffen und in diesem Div haben wir zwei verschachtelt

    Elemente und eine
    • , Element.

      JQuery

      $ (Dokument).Ready (function ()
      $ ("span").am nächsten ("ul").CSS ("Farbe": "Blue", "Border": "2PX Solid Blue");
      );

      Wir haben die engste () -Methode angewendet, um den ersten Vorfahr des Elements hervorzuheben.

      Ausgang

      Wie in der Ausgabe hervorgehoben wird, ist der zweite der zweite

      Element ist erster Vorfahr des Elements.

      Mit den oben genannten Methoden können Sie übergeordnete Elemente eines bestimmten HTML-Elements abrufen.

      Abschluss

      Um das übergeordnete Element in JQuery durch Anwenden von Methoden wie, Eltern (), Eltern (), ParentUtil () und nächsten () abzurufen. Die Parent () -Methode holt den direkten Elternteil eines Elements ab, Eltern (), die alle Eltern des A -Elements abrufen, ParentUtuntil () findet übergeordnete Elemente zwischen zwei festgelegten Elementen, und die methodische Methode holt das erste Element ab, das dem angegebenen entspricht Element. Alle diese Methoden sowie ihre relevanten Beispiele werden in diesem Leitfaden erläutert.