Der Elternteil() Methode in jQuery findet das direkte übergeordnete Element des angegebenen Selektors. Es handelt sich um eine integrierte Funktion in jQuery. Diese Methode durchläuft nur eine Ebene nach oben im DOM-Baum und gibt das direkte übergeordnete Element des ausgewählten Elements zurück.
Der Elternteil() Die Methode ähnelt der Eltern() -Methode, da beide zum DOM-Baum wandern und das übergeordnete Element zurückgeben. Der Unterschied besteht jedoch darin, dass die Eltern() Die Methode durchläuft mehrere Ebenen im DOM-Baum und gibt alle Vorfahren zurück, einschließlich eines Großelternteils, eines Urgroßelternteils usw. des angegebenen Selektors, während die Elternteil() Die Methode durchläuft eine Ebene nach oben und gibt nur das direkte übergeordnete Element des angegebenen Selektors zurück.
Syntax
$(selector).parent(filter)
Der Wähler stellt in der obigen Syntax das ausgewählte Element dar, dessen übergeordnetes Element durchsucht werden soll. Der Filter in der obigen Syntax ist der optionale Parameter, der den Selektorausdruck angibt, der zum Eingrenzen der Suche verwendet wird.
Beispiel 1
In diesem Beispiel verwenden wir nicht den optionalen Parameter von Elternteil() Methode. Hier gibt es ein div-Element, das a enthält ul Element, eine Überschrift h2 und ein Absatzelement.
Wir wenden die an Elternteil() Methode zum Suchen des übergeordneten Elements der Überschrift h2. Wenn wir das verwenden Eltern() Methode anstelle der Verwendung der Elternteil() -Methode werden alle Vorfahren der Überschrift h2, einschließlich des Körperelements, hervorgehoben.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 10px; margin: 17px; } function fun(){ $(document).ready(function(){ $('h2').parent().css({ 'font-size': '30px', 'color': 'blue', 'border': '6px dashed blue'}); }); } div <ul> ul <h2> Heading h2 <p> Paragraph element </p> </h2> </ul> click me Testen Sie es jetzt Ausgabe:
Bild als Hintergrund in CSS
Nach der Ausführung des obigen Codes lautet die Ausgabe:
Nachdem Sie auf die angegebene Schaltfläche geklickt haben, lautet die Ausgabe:
Beispiel2
In diesem Beispiel verwenden wir den optionalen Parameter von Elternteil() Methode, um das übergeordnete Element des ersten Absatzelements zu finden. Hier gibt es mehr als ein Absatzelement, aber wir müssen das übergeordnete Element des ersten Absatzelements finden. Wir übergeben also den Pseudoselektor ( :Erste ) als optionaler Wert des Elternteil() Methode.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent(':first').css({'color': 'blue', 'border': '3px dashed blue'}); }); } body div1 div2 <h2> h2 <p> Paragraph element </p> </h2> <h2> h2 <p> Paragraph element </p> </h2> click me Nach der Ausführung des obigen Codes lautet die Ausgabe:
Nachdem Sie auf die angegebene Schaltfläche geklickt haben, lautet die Ausgabe:
Beispiel3
In diesem Beispiel verwenden wir den optionalen Parameter von Elternteil() Methode zum Finden des spezifischen übergeordneten Elements des angegebenen Selektors. Hier gibt es drei Absatzelemente mit unterschiedlichen übergeordneten Elementen. Wir finden das h2 übergeordnetes Element des Absatzelements. Um dasselbe zu erreichen, müssen wir also bestehen h2 als optionaler Wert des Elternteil() Methode.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent('h2').css({'color': 'blue', 'border': '5px dashed blue'}); }); } body div1 div2 <p> Paragraph element </p> <h2> h2 <p> Paragraph element </p> </h2> <ul> ul <p> Paragraph element </p> </ul> click me Testen Sie es jetzt Ausgabe:
Nach der Ausführung des obigen Codes lautet die Ausgabe:
Pyspark-Tutorial
Nachdem Sie auf die angegebene Schaltfläche geklickt haben, lautet die Ausgabe:
