The родител () метод в jQuery намира директния родител на дадения селектор. Това е вградена функция в jQuery. Този метод преминава само едно ниво нагоре в DOM дървото и връща директния родител на избрания елемент.
The родител () методът е подобен на родители() метод, тъй като и двете пътуват до DOM дървото и връщат родителския елемент. Но разликата е, че родители() метод преминава през множество нива нагоре в DOM дървото и връща всички предшественици, включително баба и дядо, прабаба и т.н. на дадения селектор, докато родител () преминава едно ниво нагоре и връща само прекия родител на дадения селектор.
Синтаксис
$(selector).parent(filter)
The селектор в горния синтаксис представлява избрания елемент, чийто родител трябва да бъде търсен. The филтър в горния синтаксис е незадължителният параметър, който указва израза на селектора, който се използва за стесняване на търсенето.
Пример1
В този пример не използваме незадължителния параметър на родител () метод. Тук има елемент div, който съдържа a ул елемент, заглавие h2 и елемент на параграф.
Ние прилагаме родител () метод за търсене на родителя на заглавието h2. Ако използваме родители() метод вместо да използвате родител () метод, всички предшественици на заглавието h2, включително елемента body, ще бъдат осветени.
.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 Тествайте сега Изход:
След изпълнението на горния код, изходът ще бъде -
След като щракнете върху дадения бутон, изходът ще бъде -
Пример2
В този пример използваме незадължителния параметър на родител () метод за намиране на родителя на елемента от първия параграф. Тук има повече от един абзац елемент, но трябва да намерим родителя на първия абзац елемент. И така, преминаваме през псевдо-селектора ( :първо ) като незадължителна стойност на родител () метод.
.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 След изпълнението на горния код, изходът ще бъде -
След като щракнете върху дадения бутон, изходът ще бъде -
mysql не е равен
Пример3
В този пример използваме незадължителния параметър на родител () метод за намиране на конкретния родител на дадения селектор. Тук има три елемента на параграф с различни родители. Ние намираме h2 родител на елемента абзац. Така че, за да постигнем същото, трябва да преминем h2 като незадължителна стойност на родител () метод.
.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 Тествайте сега Изход:
След изпълнението на горния код, изходът ще бъде -
След като щракнете върху дадения бутон, изходът ще бъде -
