The parent() метод у jQuery знаходить прямого батька даного селектора. Це вбудована функція в jQuery. Цей метод проходить лише один рівень вгору в дереві DOM і повертає прямого батька вибраного елемента.
The parent() метод подібний до батьки() метод, оскільки обидва переміщуються до дерева DOM і повертають батьківський елемент. Але різниця в тому, що батьки() метод проходить кілька рівнів у дереві DOM і повертає всіх предків, включаючи дідуся, прабабусю тощо даного селектора, тоді як parent() метод проходить один рівень вгору та повертає лише прямого батька даного селектора.
Синтаксис
$(selector).parent(filter)
The селектор у наведеному вище синтаксисі представляє вибраний елемент, батьківський елемент якого потрібно знайти. The фільтр у наведеному вище синтаксисі є необов’язковим параметром, який визначає вираз селектора, який використовується для звуження пошуку.
Приклад1
У цьому прикладі ми не використовуємо необов’язковий параметр для parent() метод. Тут є елемент div, який містить a вул елемент, заголовок h2 і елемент абзацу.
Ми застосовуємо parent() метод для пошуку батьківського елемента заголовка h2. Якщо ми використовуємо батьки() метод замість використання parent() метод, усі предки заголовка 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
У цьому прикладі ми використовуємо необов’язковий параметр для parent() метод пошуку батьківського елемента першого абзацу. Тут є більше одного елемента абзацу, але ми повинні знайти батьківського елемента першого абзацу. Отже, ми проходимо псевдоселектор ( :перший ) як необов’язкове значення parent() метод.
.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 Після виконання наведеного вище коду результатом буде -
Після натискання вказаної кнопки виведення буде -
оператор java if
Приклад3
У цьому прикладі ми використовуємо необов’язковий параметр для parent() метод пошуку конкретного батька даного селектора. Тут є три елементи абзацу з різними батьками. Ми знаходимо h2 батьківський елемент абзацу. Отже, щоб досягти того ж, ми повинні пройти h2 як необов'язкове значення parent() метод.
.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 Перевірте зараз Вихід:
Після виконання наведеного вище коду результатом буде -
Після натискання вказаної кнопки виведення буде -
