The roditelj() metoda u jQueryju pronalazi izravnog roditelja zadanog selektora. To je ugrađena funkcija u jQuery. Ova metoda prelazi samo jednu razinu prema gore u DOM stablu i vraća izravnog roditelja odabranog elementa.
The roditelj() metoda je slična roditelji() metoda, jer oba putuju do DOM stabla i vraćaju nadređeni element. Ali razlika je u tome što roditelji() metoda prelazi više razina u DOM stablu i vraća sve pretke, uključujući baku i djeda, prabaku, itd. danog selektora, dok roditelj() metoda prelazi jednu razinu prema gore i vraća samo izravnog roditelja zadanog selektora.
Sintaksa
$(selector).parent(filter)
The selektor u gornjoj sintaksi predstavlja odabrani element čiji roditelj treba biti pretraživan. The filtar u gornjoj sintaksi je izborni parametar koji specificira izraz selektora, koji se koristi za sužavanje pretraživanja.
Primjer1
U ovom primjeru ne koristimo izborni parametar za roditelj() metoda. Ovdje postoji element div koji sadrži a ul element, naslov h2 , i element odlomka.
Primjenjujemo roditelj() metoda za pretraživanje nadređenog naslova h2. Ako koristimo roditelji() metoda umjesto korištenja roditelj() metodom, svi preci naslova h2, uključujući element tijela, bit će istaknuti.
.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 Testirajte sada Izlaz:
Nakon izvršenja gornjeg koda, izlaz će biti -
Nakon klika na dani gumb, izlaz će biti -
Primjer2
U ovom primjeru koristimo izborni parametar za roditelj() metoda za pronalaženje nadređenog elementa prvog paragrafa. Ovdje postoji više od jednog elementa odlomka, ali moramo pronaći nadređenog elementa prvog odlomka. Dakle, prolazimo pseudo-selektor ( :prvi ) kao izbornu vrijednost za roditelj() metoda.
.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 Nakon izvršenja gornjeg koda, izlaz će biti -
Nakon klika na dani gumb, izlaz će biti -
Primjer3
U ovom primjeru koristimo izborni parametar za roditelj() metoda za pronalaženje specifičnog roditelja danog selektora. Ovdje postoje tri elementa odlomka s različitim roditeljima. Nalazimo h2 roditelj elementa odlomka. Dakle, da bismo postigli isto moramo proći h2 kao izbornu vrijednost roditelj() metoda.
.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 Testirajte sada Izlaz:
Nakon izvršenja gornjeg koda, izlaz će biti -
Nakon klika na dani gumb, izlaz će biti -
