A szülő() metódus a jQueryben megkeresi az adott szelektor közvetlen szülőjét. Ez a jQuery beépített funkciója. Ez a módszer csak egy szinttel feljebb halad a DOM-fában, és visszaadja a kiválasztott elem közvetlen szülőjét.
A szülő() módszer hasonló a szülők() módszerrel, mivel mindkettő feljut a DOM fába, és visszaadja a szülőelemet. De a különbség az, hogy a szülők() metódus több szinttel feljebb halad a DOM fában, és visszaadja az adott szelektor összes ősét, beleértve a nagyszülőt, dédszülőt stb., míg a szülő() metódus egy szinttel feljebb halad, és csak az adott szelektor közvetlen szülőjét adja vissza.
Szintaxis
$(selector).parent(filter)
A választó a fenti szintaxisban azt a kiválasztott elemet jelöli, amelynek szülőjét keresni kell. A szűrő a fenti szintaxisban az opcionális paraméter, amely megadja a választó kifejezést, amely a keresés szűkítésére szolgál.
Példa1
Ebben a példában nem az opcionális paraméterét használjuk szülő() módszer. Itt van egy div elem, amely tartalmazza a ul elem, egy címsor h2 , és egy bekezdés elem.
Alkalmazzuk a szülő() módszer a címsor szülőjének keresésére h2. Ha használjuk a szülők() módszer használata helyett a szülő() módszerrel a h2 címsor összes őse ki lesz emelve, beleértve a törzselemet is.
java mást ha
.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 Tesztelje most Kimenet:
A fenti kód végrehajtása után a kimenet a következő lesz:
Az adott gombra kattintás után a kimenet a következő lesz:
Példa2
Ebben a példában az opcionális paramétert használjuk szülő() módszert az első bekezdés elem szülőjének megtalálásához. Itt egynél több bekezdéselem van, de meg kell találnunk az első bekezdéselem szülőjét. Tehát áthaladunk a pszeudoválasztón ( :első ) opcionális értékeként a szülő() módszer.
.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 A fenti kód végrehajtása után a kimenet a következő lesz:
Az adott gombra kattintás után a kimenet a következő lesz:
Példa3
Ebben a példában az opcionális paramétert használjuk szülő() módszer az adott szelektor konkrét szülőjének megtalálására. Itt három bekezdéselem található különböző szülőkkel. Megtaláljuk a h2 a bekezdés elem szülője. Tehát, hogy ugyanezt elérjük, át kell adnunk a h2 mint opcionális értéke a szülő() módszer.
.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 Tesztelje most Kimenet:
chown parancsot
A fenti kód végrehajtása után a kimenet a következő lesz:
Az adott gombra kattintás után a kimenet a következő lesz:
