De förälder() metod i jQuery hittar den direkta föräldern till den givna väljaren. Det är en inbyggd funktion i jQuery. Den här metoden går bara igenom en enda nivå upp i DOM-trädet och returnerar den direkta föräldern till det valda elementet.
De förälder() metoden liknar föräldrar() metod, eftersom båda reser upp till DOM-trädet och returnerar det överordnade elementet. Men skillnaden är att föräldrar() metoden korsar flera nivåer upp i DOM-trädet och returnerar alla förfäder, inklusive en mor- och farförälder, etc. för den givna väljaren, medan förälder() metoden går en enda nivå upp och returnerar endast den direkta överordnade för den givna väljaren.
Syntax
$(selector).parent(filter)
De väljare i ovanstående syntax representerar det valda elementet vars förälder ska sökas igenom. De filtrera i ovanstående syntax finns den valfria parametern som anger väljaruttrycket, som används för att begränsa sökningen.
sträng en int
Exempel1
I det här exemplet använder vi inte den valfria parametern för förälder() metod. Här finns ett div-element som innehåller en ul element, en rubrik h2 och ett styckeelement.
Vi tillämpar förälder() metod för att söka efter föräldern till rubriken h2. Om vi använder föräldrar() metoden istället för att använda förälder() metod kommer alla förfäder till rubriken h2, inklusive body-elementet, att markeras.
.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 Testa det nu Produktion:
Efter exekvering av ovanstående kod kommer utgången att vara -
vad är dator
Efter att ha klickat på den givna knappen kommer utgången att vara -
Exempel 2
I det här exemplet använder vi den valfria parametern för förälder() metod för att hitta föräldern till elementet första stycket. Här finns det mer än ett styckeelement men vi måste hitta föräldern till det första styckeelementet. Så vi passerar pseudoväljaren ( :först ) som valfritt värde för förälder() metod.
.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 Efter exekvering av ovanstående kod kommer utgången att vara -
Efter att ha klickat på den givna knappen kommer utgången att vara -
Exempel 3
I det här exemplet använder vi den valfria parametern för förälder() metod för att hitta den specifika föräldern till den givna väljaren. Här finns tre styckeelement med olika föräldrar. Vi hittar h2 förälder till styckeelementet. Så för att uppnå samma måste vi klara av h2 som valfritt värde på förälder() metod.
.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 Testa det nu Produktion:
Efter exekvering av ovanstående kod kommer utgången att vara -
ascii tabell java
Efter att ha klickat på den givna knappen kommer utgången att vara -
