.matches()

matches(element, selector)

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

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

<div id="example" class="uk-card uk-card-default uk-card-body">Карточка</div>

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

// Cоответствует ли элемент селектору?
if (util.matches(myElement, 'div.uk-card-default')) {
  console.log('Элемент соответствует CSS-селектору!')
} else {
  console.log('Элемент НЕ соответствует!')
}

'Элемент соответствует CSS-селектору!'

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

<div class="uk-panel">Контент</div>
<p class="uk-panel">Контент</p>
<div>
	<p class="uk-panel">Контент</p>
</div>

const myEls  = util.$$('.uk-panel');

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

<div class="uk-panel">Контент</div>
<p class="uk-panel uk-text-success">Контент</p>
<div>
	<p class="uk-panel uk-text-success">Контент</p>
</div>

В следующем примере основываясь на позиции среди группы соседних элементов дополнительный класс получит номер 4 и 6.

<div id="example">
	<ul>
		<li>Содержимое №1</li>
		<li class="test">Содержимое №2</li>
		<li>Содержимое №3</li>
		<li>Содержимое №4</li>
		<li>Содержимое №5</li>
		<li>Содержимое №6</li>
	</ul>
</div>

const myElem = util.$$('#example li');

if (util.matches(myElem, 'ul>:nth-child(2n)')) {
	let myNtn = util.$$('#example ul>:nth-child(2n):not([class])');
	
	util.addClass(myNtn, 'uk-text-success');
}

<div id="example">
	<ul>
		<li>Содержимое №1</li>
		<li class="test">Содержимое №2</li>
		<li>Содержимое №3</li>
		<li class="uk-text-success">Содержимое №4</li>
		<li>Содержимое №5</li>
		<li class="uk-text-success">Содержимое №6</li>
	</ul>
</div>

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