.children()

children(element [, selector])

Метод .children() находит дочерние элементы в дереве DOM. Если дополнительно передать селектор, то можно отфильтровать результат. Метод .children() перемещается только на один уровень вниз по дереву DOM. Если нужен поиск элемента на несколько уровней, то можно обратить внимание на функцию util.find() или util.$(); если требуется поиск нескольких элементов, то util.findAll() или util.$$().

Примеры использование

Найти прямых потомков

В данном примере используя util.children() найдём прямых потомков элемента с идентификатором my-el и добавим класс списка .uk-list с помощью функции util.addClass().

<article>
	<div id="my-el">
		<ul>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
		<ul>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</div>
</article>

var myElem  = util.$('#my-el');
var myChild = util.children(myElem);

util.addClass(myChild, 'uk-list');

Результат

<article>
	<div id="my-el">
		<ul class="uk-list">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
		<ul class="uk-list">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</div>
</article>

Найти одного потомка и добавить класс

В следующем примере используя util.children() найдём потомка с классом .uk-active в списке с идентификатором my-list, добавим класс для изменения цвета текста - .uk-text-success, с помощью утил-функции util.addClass().

<ul id="my-list">
	<li>Элемент списка</li>
	<li class="uk-active">Элемент списка</li>
	<li>Элемент списка</li>
</ul>

var myList  = util.$('#my-list');
var myChild = util.children(myList, '.uk-active');

util.addClass(myChild, 'uk-text-success');

Результат

<ul id="my-list">
	<li>Элемент списка</li>
	<li class="uk-active uk-text-success">Элемент списка</li>
	<li>Элемент списка</li>
</ul>