De forelder() metoden i jQuery finner den direkte overordnede til den gitte velgeren. Det er en innebygd funksjon i jQuery. Denne metoden krysser bare et enkelt nivå opp i DOM-treet og returnerer den direkte overordnede til det valgte elementet.
De forelder() metoden ligner på foreldre() metode, da begge reiser opp til DOM-treet og returnerer det overordnede elementet. Men forskjellen er at foreldre() metoden krysser flere nivåer opp i DOM-treet og returnerer alle forfedre, inkludert en besteforeldre, oldeforeldre osv. til den gitte velgeren, mens forelder() metoden går et enkelt nivå opp og returnerer bare den direkte overordnede til den gitte velgeren.
Syntaks
$(selector).parent(filter)
De velger i ovennevnte syntaks representerer det valgte elementet hvis overordnede skal søkes. De filter i syntaksen ovenfor er den valgfrie parameteren som spesifiserer velgeruttrykket, som brukes til å begrense søket.
Eksempel 1
I dette eksemplet bruker vi ikke den valgfrie parameteren til forelder() metode. Her er det et div-element som inneholder en ul element, en overskrift h2 , og et avsnittselement.
Vi bruker forelder() metode for å søke etter overskriften til overskriften h2. Hvis vi bruker foreldre() metoden i stedet for å bruke forelder() metoden vil alle forfedre til overskriften h2, inkludert body-elementet, bli uthevet.
.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 Test det nå Produksjon:
replaceall i streng java
Etter utførelse av koden ovenfor, vil utgangen være -
Etter å ha klikket på den gitte knappen, vil utgangen være -
Eksempel 2
I dette eksemplet bruker vi den valgfrie parameteren til forelder() metode for å finne overordnet til elementet i første avsnitt. Her er det mer enn ett avsnittselement, men vi må finne overordnet til det første avsnittselementet. Så vi passerer pseudovelgeren ( :først ) som den valgfrie verdien av forelder() metode.
.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 Etter utførelse av koden ovenfor, vil utgangen være -
Etter å ha klikket på den gitte knappen, vil utgangen være -
Eksempel 3
I dette eksemplet bruker vi den valgfrie parameteren til forelder() metode for å finne den spesifikke forelderen til den gitte velgeren. Her er det tre avsnittselementer med ulike foreldre. Vi finner h2 overordnet til avsnittselementet. Så for å oppnå det samme må vi bestå h2 som valgfri verdi av forelder() metode.
.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 Test det nå Produksjon:
Etter utførelse av koden ovenfor, vil utgangen være -
Etter å ha klikket på den gitte knappen, vil utgangen være -
