.parent()

Filter

Получить родительский элемент определённого элемента 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>