The rodzic() metoda w jQuery znajduje bezpośredniego rodzica danego selektora. Jest to wbudowana funkcja w jQuery. Ta metoda przechodzi tylko o jeden poziom wyżej w drzewie DOM i zwraca bezpośredniego rodzica wybranego elementu.
The rodzic() metoda jest podobna do rodzice() metodę, ponieważ obie prowadzą do drzewa DOM i zwracają element nadrzędny. Ale różnica jest taka, że rodzice() metoda przechodzi wiele poziomów w górę drzewa DOM i zwraca wszystkich przodków, w tym dziadków, pradziadków itp. danego selektora, podczas gdy metoda rodzic() Metoda przechodzi o jeden poziom wyżej i zwraca tylko bezpośredniego rodzica danego selektora.
Składnia
$(selector).parent(filter)
The selektor w powyższej składni reprezentuje wybrany element, którego rodzic ma być przeszukiwany. The filtr w powyższej składni jest opcjonalny parametr określający wyrażenie selektora, które służy do zawężenia wyszukiwania.
Przykład 1
W tym przykładzie nie używamy opcjonalnego parametru rodzic() metoda. Tutaj znajduje się element div, który zawiera a ul element, nagłówek h2 i element akapitu.
Stosujemy rodzic() metoda wyszukiwania rodzica nagłówka h2. Jeśli skorzystamy z rodzice() metodę zamiast używać metody rodzic() metody, wszyscy przodkowie nagłówka h2, łącznie z elementem body, zostaną podświetleni.
.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 Przetestuj teraz Wyjście:
Po wykonaniu powyższego kodu wyjściem będzie -
Po kliknięciu danego przycisku wyjściem będzie -
Przykład2
W tym przykładzie używamy opcjonalnego parametru rodzic() metoda znalezienia rodzica elementu pierwszego akapitu. Tutaj jest więcej niż jeden element akapitu, ale musimy znaleźć rodzica pierwszego elementu akapitu. Zatem przekazujemy pseudoselektor ( :Pierwszy ) jako opcjonalna wartość rodzic() 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 wykonaniu powyższego kodu wyjściem będzie -
Po kliknięciu danego przycisku wyjściem będzie -
Przykład 3
W tym przykładzie używamy opcjonalnego parametru rodzic() metoda znalezienia konkretnego rodzica danego selektora. Tutaj znajdują się trzy elementy akapitu z różnymi rodzicami. Znajdujemy h2 rodzic elementu akapitu. Aby osiągnąć to samo, musimy przejść h2 jako opcjonalna wartość rodzic() 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 Przetestuj teraz Wyjście:
Po wykonaniu powyższego kodu wyjściem będzie -
Po kliknięciu danego przycisku wyjściem będzie -
