.within()

within(element, selector)

Метод .within() может быть полезен, когда требуется определить, соответствует ли указанный элемент селектору, где selector - либо сам элемент, либо может быть его родителем. Фильтр возвращает логическое значение true, если элемент сам соответствует указанному CSS-селектору, либо имеет родителя с указанным CSS-селектором, в противном случае вернёт false. Частично похожий метод фильтрации util.matches().

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

Проверка на соответствие селектору

<div id="example" class="my-class">Проверка соответствия</div>

const myElement = util.$('#example');

// Cоответствует ли элемент селектору?
if (util.within(myElement, 'div.my-class')) {
  console.log('Элемент соответствует поиску!')
} else {
  console.log('Элемент НЕ соответствует!')
}

'Элемент соответствует поиску!'

Множественная проверка на соответствие селектору

В следующем примере найдём все элементы с классом .my-element, используя util.within() отфильтруем результат, который должен содерать параграф и класс .my-search. Изменим у текста цвет на другой используя UIkit.util метод .addClass(), функция позволит добавить класс .uk-text-success.

<div class="my-search">
	<div class="my-element">Не сработает</div>
</div>

<p class="my-element my-search">Сработает текущий</p>

<div>
	<p class="my-search">
		<span class="my-element">Сработает родитель</span>
	</p>
</div>

const myEls  = util.$$('.my-element');

for (let i=0; i < myEls.length; i++) {
    if (util.within(myEls[i], 'p.my-search')) {
        util.addClass(myEls[i], 'uk-text-success');
    }
}

<div class="my-search">
	<div class="my-element">Не сработает</div>
</div>

<p class="my-element my-search uk-text-success">Сработает текущий</p>

<div>
	<p class="my-search">
		<span class="my-element uk-text-success">Сработает родитель</span>
	</p>
</div>

Если нужен поиск конкретного элемента в дереве DOM по селектору, то можно обратить внимание на UIkit.util метод .$().