De ouder() methode in jQuery vindt de directe ouder van de gegeven selector. Het is een ingebouwde functie in jQuery. Deze methode doorloopt slechts één niveau hoger in de DOM-boom en retourneert de directe ouder van het geselecteerde element.
De ouder() methode is vergelijkbaar met de ouders() methode, omdat beide naar de DOM-boom gaan en het bovenliggende element retourneren. Maar het verschil is dat de ouders() methode doorloopt meerdere niveaus hoger in de DOM-boom en retourneert alle voorouders, inclusief een grootouder, overgrootouder, enz. van de gegeven selector, terwijl de ouder() methode doorloopt één niveau hoger en retourneert alleen de directe ouder van de gegeven selector.
Syntaxis
$(selector).parent(filter)
De keuzeschakelaar in de bovenstaande syntaxis vertegenwoordigt het geselecteerde element waarvan het bovenliggende element moet worden doorzocht. De filter in de bovenstaande syntaxis is de optionele parameter die de selectorexpressie specificeert, die wordt gebruikt om de zoekopdracht te verfijnen.
netwerk en soorten netwerken
Voorbeeld 1
In dit voorbeeld gebruiken we niet de optionele parameter van de ouder() methode. Hier is er een div-element dat a bevat ul element, een kop h2 en een alinea-element.
Wij passen de ouder() methode voor het zoeken naar de ouder van kop h2. Als we gebruik maken van de ouders() methode in plaats van het gebruik van de ouder() methode worden alle voorouders van kop h2, inclusief het body-element, gemarkeerd.
.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 Test het nu Uitgang:
Na de uitvoering van de bovenstaande code zal de uitvoer zijn:
lijst gesorteerd op Java
Nadat u op de gegeven knop hebt geklikt, zal de uitvoer zijn:
Voorbeeld2
In dit voorbeeld gebruiken we de optionele parameter van de ouder() methode om de ouder van het eerste alinea-element te vinden. Hier zijn er meer dan één alinea-element, maar we moeten de ouder van het eerste alinea-element vinden. We passeren dus de pseudo-selector ( :Eerst ) als de optionele waarde van de ouder() methode.
.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 Na de uitvoering van de bovenstaande code zal de uitvoer zijn:
Nadat u op de gegeven knop hebt geklikt, zal de uitvoer zijn:
Voorbeeld3
In dit voorbeeld gebruiken we de optionele parameter van de ouder() methode voor het vinden van de specifieke ouder van de gegeven selector. Hier zijn er drie alinea-elementen met verschillende ouders. Wij vinden de h2 ouder van het alinea-element. Om hetzelfde te bereiken moeten we dus slagen voor de h2 als de optionele waarde van de ouder() methode.
.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 Test het nu Uitgang:
Na de uitvoering van de bovenstaande code zal de uitvoer zijn:
middelste knop in css
Nadat u op de gegeven knop hebt geklikt, zal de uitvoer zijn:
