.parent()
Получить родительский элемент определённого элемента DOM дерева.
parent([element])
Метод .parent()
возвращает родителя элемента. Метод перемещается только на один уровень вверх по дереву DOM.
В функцию можно передать следующий параметр:
Параметр | Тип | Описание |
---|---|---|
element |
Node | Элемент HTML |
Использование
В данном примере, используя метод .parent()
найдём родителя у имеющегося заголовка, а также добавим в уже найденный родительский div
класс-контейнер - .uk-container
,
с помощью функции util.addClass().
<section class="uk-section">
<div>
<h3 id="my-title">Заголовок</h3>
</div>
</section>
const myTitle = util.$('#my-title');
const myParent = util.parent(myTitle);
util.addClass(myParent, 'uk-container');
Результат
<section class="uk-section">
<div class="uk-container">
<h3 id="my-title">Заголовок</h3>
</div>
</section>
В следующем примере util.parent()
найдёт родителей нескольких элементов.
С помощью функции util.replaceClass() заменим у родителей класс-модификатор карты.
<ul class="uk-child-width-1-2" uk-grid>
<li>
<div class="uk-card uk-card-body uk-card-default">
<span class="my-elem">Карточка</span>
</div>
</li>
<li>
<div class="uk-card uk-card-body uk-card-default">
<span class="my-elem">Карточка</span>
</div>
</li>
</ul>
var myElem = util.$$('.my-elem');
util.each(myElem, function (elem) {
let elParent = util.parent(elem);
util.replaceClass(elParent, 'uk-card-default', 'uk-card-primary');
});
Результат
<ul class="uk-child-width-1-2" uk-grid>
<li>
<div class="uk-card uk-card-body uk-card-primary">
<span class="my-elem">Карточка</span>
</div>
</li>
<li>
<div class="uk-card uk-card-body uk-card-primary">
<span class="my-elem">Карточка</span>
</div>
</li>
</ul>