Тхе родитељ() метода у јКуери-ју проналази директног родитеља датог селектора. То је функција уграђена у јКуери. Овај метод прелази само један ниво горе у ДОМ стаблу и враћа директног родитеља изабраног елемента.
Тхе родитељ() метода је слична оној родитељи() метод, пошто оба путују до ДОМ стабла и враћају родитељски елемент. Али разлика је у томе што родитељи() метода прелази више нивоа навише у ДОМ стаблу и враћа све претке, укључујући баку и деду, прабаку и прадеду, итд. датог селектора, док родитељ() метода прелази један ниво навише и враћа само директног родитеља датог селектора.
Синтакса
$(selector).parent(filter)
Тхе селектор у горњој синтакси представља изабрани елемент чији се родитељ тражи. Тхе филтер у горњој синтакси је опциони параметар који специфицира израз селектора, који се користи за сужавање претраге.
Пример1
У овом примеру не користимо опциони параметар родитељ() методом. Овде постоји елемент див који садржи а ул елемент, наслов х2 , и елемент пасуса.
Ми примењујемо родитељ() метод за претрагу надређеног наслова х2. Ако користимо родитељи() метод уместо коришћења родитељ() методом, сви преци наслова х2, укључујући елемент тела, биће истакнути.
.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 Након извршења горњег кода, излаз ће бити -
Након што кликнете на дато дугме, излаз ће бити -
Пример3
У овом примеру користимо опциони параметар родитељ() метод за проналажење одређеног родитеља датог селектора. Овде постоје три елемента пасуса са различитим родитељима. Налазимо х2 родитељ елемента пасуса. Дакле, да бисмо постигли исто морамо проћи х2 као опциону вредност родитељ() методом.
.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 Тестирајте одмах Излаз:
Након извршења горњег кода, излаз ће бити -
Након што кликнете на дато дугме, излаз ће бити -
