Det forælder() metoden i jQuery finder den direkte overordnede for den givne vælger. Det er en indbygget funktion i jQuery. Denne metode krydser kun et enkelt niveau op i DOM-træet og returnerer den direkte overordnede for det valgte element.
Det forælder() metoden ligner forældre() metode, da både rejser op til DOM-træet og returnerer det overordnede element. Men forskellen er, at forældre() metoden krydser flere niveauer op i DOM-træet og returnerer alle forfædre, inklusive en bedsteforælder, oldeforælder osv. for den givne vælger, mens forælder() metoden krydser et enkelt niveau op og returnerer kun den direkte overordnede for den givne vælger.
Syntaks
$(selector).parent(filter)
Det vælger i ovenstående syntaks repræsenterer det valgte element, hvis overordnede skal søges. Det filter i ovenstående syntaks er den valgfri parameter, der specificerer vælgerudtrykket, som bruges til at indsnævre søgningen.
Eksempel 1
I dette eksempel bruger vi ikke den valgfri parameter for forælder() metode. Her er der et div-element, der indeholder en ul element, en overskrift h2 , og et afsnitselement.
Vi anvender forælder() metode til at søge efter overskriften h2. Hvis vi bruger forældre() metode i stedet for at bruge forælder() metode, vil alle forfædre til overskrift h2, inklusive kropselementet, blive fremhævet.
.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 nu Produktion:
hvad er 10 af 1 mio
Efter udførelse af ovenstående kode vil outputtet være -
Efter at have klikket på den givne knap, vil outputtet være -
Eksempel 2
I dette eksempel bruger vi den valgfri parameter for forælder() metode til at finde forælderen til elementet i første afsnit. Her er der mere end ét afsnitselement, men vi skal finde forælderen til det første afsnitselement. Så vi passerer pseudovælgeren ( :først ) som den valgfri værdi af forælder() 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 Efter udførelse af ovenstående kode vil outputtet være -
Efter at have klikket på den givne knap, vil outputtet være -
Eksempel 3
I dette eksempel bruger vi den valgfri parameter for forælder() metode til at finde den specifikke forælder til den givne vælger. Her er der tre afsnitselementer med forskellige forældre. Vi er ved at finde h2 forælder til afsnitselementet. Så for at opnå det samme skal vi bestå h2 som valgfri værdi af forælder() 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 nu Produktion:
Efter udførelse af ovenstående kode vil outputtet være -
Efter at have klikket på den givne knap, vil outputtet være -
