The vanhempi() jQuery-menetelmä löytää tietyn valitsimen suoran vanhemman. Se on jQueryn sisäänrakennettu toiminto. Tämä menetelmä kulkee vain yhden tason ylöspäin DOM-puussa ja palauttaa valitun elementin suoran ylätason.
The vanhempi() menetelmä on samanlainen kuin vanhemmat() menetelmällä, koska molemmat matkustavat DOM-puuhun ja palauttavat emoelementin. Mutta ero on siinä, että vanhemmat() menetelmä kulkee useita tasoja ylöspäin DOM-puussa ja palauttaa kaikki esi-isät, mukaan lukien valitun valitsimen isovanhempi, isoisovanhempi jne., kun taas vanhempi() menetelmä kulkee yhden tason ylöspäin ja palauttaa vain annetun valitsimen suoran ylätason.
Syntaksi
$(selector).parent(filter)
The valitsin yllä olevassa syntaksissa edustaa valittua elementtiä, jonka emoelementtiä etsitään. The suodattaa yllä olevassa syntaksissa on valinnainen parametri, joka määrittää valitsinlausekkeen, jota käytetään haun rajaamiseen.
Esimerkki1
Tässä esimerkissä emme käytä valinnaista parametria vanhempi() menetelmä. Tässä on div-elementti, joka sisältää a ul elementti, otsikko h2 , ja kappaleelementti.
Sovellamme vanhempi() menetelmä otsikon ylätason etsimiseksi h2. Jos käytämme vanhemmat() menetelmän käytön sijaan vanhempi() -menetelmää, kaikki otsikon h2 esi-isät, mukaan lukien body-elementti, korostetaan.
.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 Testaa nyt Lähtö:
Yllä olevan koodin suorittamisen jälkeen tulos on -
Kun napsautat annettua painiketta, tulos on -
Esimerkki2
Tässä esimerkissä käytämme valinnaista parametria vanhempi() menetelmä ensimmäisen kappaleen elementin ylätason löytämiseksi. Tässä on useampi kuin yksi kappaleelementti, mutta meidän on löydettävä ensimmäisen kappaleen elementti. Joten ohitamme pseudovalitsimen ( :ensimmäinen ) valinnaisena arvona vanhempi() menetelmä.
.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 Yllä olevan koodin suorittamisen jälkeen tulos on -
Kun napsautat annettua painiketta, tulos on -
Esimerkki3
Tässä esimerkissä käytämme valinnaista parametria vanhempi() menetelmä tietyn valitsimen vanhemman löytämiseksi. Tässä on kolme kappaleelementtiä eri vanhempien kanssa. Olemme löytämässä h2 kappaleelementin ylätaso. Joten saavuttaaksemme saman meidän on läpäistävä h2 valinnaisena arvona vanhempi() menetelmä.
.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 Testaa nyt Lähtö:
Yllä olevan koodin suorittamisen jälkeen tulos on -
Kun napsautat annettua painiketta, tulos on -
