The rodič() metóda v jQuery nájde priameho rodiča daného selektora. Je to vstavaná funkcia v jQuery. Táto metóda prejde iba o jednu úroveň vyššie v strome DOM a vráti priameho rodiča vybratého prvku.
The rodič() metóda je podobná rodičia () metódu, pretože obe cestujú do stromu DOM a vrátia rodičovský prvok. Ale rozdiel je v tom, že rodičia () metóda prechádza v strome DOM o niekoľko úrovní vyššie a vracia všetkých predkov, vrátane prarodiča, prastarého rodiča atď. daného selektora, pričom rodič() metóda prechádza o jednu úroveň vyššie a vracia iba priameho rodiča daného selektora.
Syntax
$(selector).parent(filter)
The selektor vo vyššie uvedenej syntaxi predstavuje vybraný prvok, ktorého rodič sa má hľadať. The filter vo vyššie uvedenej syntaxi je voliteľný parameter, ktorý určuje výraz selektora, ktorý sa používa na zúženie vyhľadávania.
Príklad 1
V tomto príklade nepoužívame voliteľný parameter rodič() metóda. Tu je prvok div, ktorý obsahuje a ul prvok, nadpis h2 a prvok odseku.
Uplatňujeme rodič() metóda na vyhľadávanie rodiča nadpisu h2. Ak použijeme rodičia () namiesto použitia metódy rodič() metódou budú zvýraznení všetci predkovia nadpisu h2 vrátane prvku tela.
.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 Otestujte si to Výkon:
Po vykonaní vyššie uvedeného kódu bude výstupom -
Po kliknutí na dané tlačidlo bude výstup -
Príklad2
V tomto príklade používame voliteľný parameter rodič() metóda na nájdenie rodiča prvého prvku odseku. Tu je viac ako jeden prvok odseku, ale musíme nájsť rodiča prvého prvku odseku. Takže prechádzame pseudoselektorom ( :najprv ) ako voliteľná hodnota rodič() metóda.
.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 vykonaní vyššie uvedeného kódu bude výstupom -
Po kliknutí na dané tlačidlo bude výstup -
Príklad 3
V tomto príklade používame voliteľný parameter rodič() metóda na nájdenie konkrétneho rodiča daného selektora. Tu sú tri prvky odseku s rôznymi rodičmi. Zisťujeme, h2 rodič prvku odseku. Takže, aby sme dosiahli to isté, musíme prejsť h2 ako voliteľná hodnota rodič() metóda.
.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 Otestujte si to Výkon:
Po vykonaní vyššie uvedeného kódu bude výstupom -
Po kliknutí na dané tlačidlo bude výstup -
