.filter()

filter(element, selector)

Функция util.filter() фильтрует по переданному селектору в пределах собственной видимости. В фильтр попадают как дочерние элементы, так и сам элемент.

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

<div id="example" class="my-examle-class">Содержимое</div>

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

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

'Элемент ok!'

В следующем примере используем вложенную навигацию, в которой почему-то не указан класс .uk-parent для элементов с субнавигацией. Нужно исправить это недоразумение. Найдём в списке с ID #my-nav все ul элементы с классом .uk-nav-sub и отфильтровав результат добавим недостающие классы при помощи функции util.addClass(), где будет указан родительский li, который предоставит фильтр util.closest().

<ul id="my-nav" class="uk-nav">
	<li>
        <a href="">Пункт меню</a>
        <ul class="uk-nav-sub">
            <li><a href="">Подпункт меню</a></li>
        </ul>
    </li>
    <li>
        <a href="">Пункт меню</a>
        <ul class="uk-nav-sub">
            <li>
            	<a href="">Подпункт меню</a>
            	<ul class="uk-nav-sub">
            		<li>
            			<a href="">Подпункт меню</a>
            		</li>
            	</ul>
            </li>
        </ul>
    </li>
</ul>

Примечание и сравнение: util.filter() правильно сработает, а если заменить его на util.within() не сработает, т.к. ul.uk-nav-sub сам не myNav и не родитель myNav.

const myNav    = util.$('#my-nav');

if (util.filter(myNav, 'ul.uk-nav-sub')) {
    let myNavSub = util.$$('ul.uk-nav-sub');
    let myParent = util.closest(myNavSub, '#my-nav li');
    
    util.addClass(myParent, 'uk-parent');
}

<ul id="my-nav" class="uk-nav">
	<li class="uk-parent">
        <a href="">Пункт меню</a>
        <ul class="uk-nav-sub">
            <li><a href="">Подпункт меню</a></li>
        </ul>
    </li>
    <li class="uk-parent">
        <a href="">Пункт меню</a>
        <ul class="uk-nav-sub">
            <li class="uk-parent">
            	<a href="">Подпункт меню</a>
            	<ul class="uk-nav-sub">
            		<li>
            			<a href="">Подпункт меню</a>
            		</li>
            	</ul>
            </li>
        </ul>
    </li>
</ul>

В следующем примере основываясь на позиции среди группы соседних элементов дополнительный класс получит 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>

Примечание и сравнение: Если переменной myElem присвоить значение util.$$('#example li'), то аналогично сработает util.matches() при замене util.filter().

var myElem = util.$('#example');

if (util.filter(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>