The starš() metoda v jQuery najde neposrednega starša danega izbirnika. Je vgrajena funkcija v jQuery. Ta metoda prečka samo eno raven navzgor v drevesu DOM in vrne neposrednega starša izbranega elementa.
The starš() metoda je podobna starši() metoda, saj oba potujeta do drevesa DOM in vrneta nadrejeni element. Toda razlika je v tem, da starši() metoda prečka več ravni navzgor v drevesu DOM in vrne vse prednike, vključno s starim staršem, prastaršem itd. danega izbirnika, medtem ko starš() metoda prečka eno raven navzgor in vrne samo neposrednega starša danega izbirnika.
Sintaksa
$(selector).parent(filter)
The selektor v zgornji sintaksi predstavlja izbrani element, katerega nadrejenega elementa je treba iskati. The filter v zgornji sintaksi je izbirni parameter, ki določa izbirni izraz, ki se uporablja za zožitev iskanja.
Primer1
V tem primeru ne uporabljamo izbirnega parametra za starš() metoda. Tukaj je element div, ki vsebuje a ul element, naslov h2 in element odstavka.
Uporabljamo starš() metoda za iskanje nadrejenega naslova h2. Če uporabljamo starši() namesto uporabe starš() bodo vsi predniki naslova h2, vključno z elementom body, označeni.
.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 Preizkusite zdaj Izhod:
Po izvedbi zgornje kode bo rezultat -
Po kliku danega gumba bo rezultat -
Primer2
V tem primeru uporabljamo izbirni parameter za starš() metoda za iskanje nadrejenega elementa prvega odstavka. Tukaj je več kot en element odstavka, vendar moramo najti nadrejenega elementa prvega odstavka. Torej gremo mimo psevdoizbirnika ( :prvi ) kot izbirna vrednost za starš() 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 Po izvedbi zgornje kode bo rezultat -
Po kliku danega gumba bo rezultat -
Primer3
V tem primeru uporabljamo izbirni parameter za starš() metoda za iskanje določenega starša danega izbirnika. Tukaj so trije elementi odstavka z različnimi starši. Iščemo h2 nadrejeni element elementa odstavka. Torej, da bi dosegli isto, moramo opraviti h2 kot izbirna vrednost starš() 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 Preizkusite zdaj Izhod:
Po izvedbi zgornje kode bo rezultat -
Po kliku danega gumba bo rezultat -
