util.$$()

Выбрать несколько найденных элементов HTML документа, которые соответствуют указанному селектору.

$$(selector [, context]);
Параметр Тип Описание
selector String Действительный CSS-селектор для элемента.
context Node Элемент HTML для использования в качестве контекста.

Метод .$$() Двойной доллар возвращает список содержащий все найденные HTML-элементы документа, которые соответствуют указанному селектору. Строка selector должна быть валидным CSS селектором.

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

Выбрать несколько элементов HTML

<div class="uk-child-width-1-3 uk-text-center" uk-grid>
	<div class="example">
		<span class="uk-card uk-card-body uk-card-hover">А</span>
	</div>
	<div class="example">
		<span class="uk-card uk-card-body uk-card-hover">Б</span>
	</div>
	<div class="example">
		<span class="uk-card uk-card-body uk-card-hover">В</span>
	</div>
</div>

// Выбираем несколько HTML-элементов
var elements = util.$$('.example');

console.log(elements);
Результат
(3) [div.example, div.example, div.example]

На данный момент селекторный метод принимает один или более селекторов, разделённых запятыми, чтобы определить, какие элементы должны быть возвращены. Например, используя JavaScript UIkit 3, чтобы найти все ссылки в документе, которые имеют классы .uk-alert-close или .uk-button-default можно сделать следующее: 

let myElements = util.$$('a.uk-alert-close, a.uk-button-default');

Селектор - Контекст

По умолчанию поиск выполняется в DOM начиная с корня документа, т.е. контекст равен всему документу. Однако для поиска можно задать альтернативный контекст, используя необязательный второй параметр функции $$(). Например, чтобы выполнить поиск в обработчике (функция, которая сработает, как только событие произошло) событий, поиск можно ограничить.

Когда диапазон поиска ограничен контекстом this, только в выбранном диапазоне элемент получит дополнительный класс .uk-card-primary, иначе класс получат все. 

<div class="uk-grid uk-child-width-1-3 uk-text-center">
	<div class="example">
		<span class="uk-card uk-card-body uk-card-hover">А</span>
	</div>
	<div class="example">
		<span class="uk-card uk-card-body uk-card-hover">Б</span>
	</div>
	<div class="example">
		<span class="uk-card uk-card-body uk-card-hover">В</span>
	</div>
</div>
util.on('.example', 'click', function () {
    let myClass = util.$$('.example span', this)
  
    util.toggleClass(myClass, 'uk-card-primary')
});
А
Б
В