Фильтрация выбранных элементов

Библиотека Umbrella JS предоставляет компактный и удобный API для работы с DOM. Одной из ключевых возможностей является фильтрация выбранных элементов, что позволяет манипулировать только необходимыми узлами без лишних обходов и условий.

Метод filter()

Метод filter() используется для отбора элементов из текущей коллекции на основе функции обратного вызова или CSS-селектора. Он возвращает новую коллекцию Umbrella, содержащую только те элементы, для которых условие выполняется.

Синтаксис:

u(selector).filter(callback);
u(selector).filter(cssSelector);

Параметры:

  • callback — функция, принимающая три аргумента:

    1. element — текущий DOM-элемент;
    2. index — порядковый номер элемента в коллекции;
    3. array — исходная коллекция элементов.

    Должна возвращать true для включения элемента в новую коллекцию и false для исключения.

  • cssSelector — строка с селектором CSS, по которому производится фильтрация.

Пример использования с функцией:

u('li').filter(function(el, i) {
    return i % 2 === 0; // оставляет только чётные элементы списка
});

Пример использования с селектором:

u('div').filter('.active'); // оставляет только элементы с классом active

Метод not()

Метод not() работает аналогично filter(), но выполняет исключение элементов, соответствующих условию. Он также принимает функцию обратного вызова или CSS-селектор.

Синтаксис:

u(selector).not(callback);
u(selector).not(cssSelector);

Пример:

u('p').not('.highlight'); // выбирает все <p>, кроме тех, у которых класс highlight

Функция обратного вызова возвращает true для элементов, которые должны быть исключены:

u('li').not(function(el, i) {
    return i === 0; // исключает первый элемент списка
});

Метод has()

Метод has() позволяет фильтровать элементы, которые содержат определённый потомок, соответствующий CSS-селектору.

Синтаксис:

u(selector).has(cssSelector);

Пример:

u('ul').has('li.selected'); // оставляет только <ul>, содержащие хотя бы один <li> с классом selected

Цепочки фильтрации

Umbrella JS поддерживает цепочки вызовов, что позволяет комбинировать фильтры для более точного отбора элементов.

Пример:

u('div')
  .filter('.container')
  .not('.hidden')
  .has('p');

В этом примере сначала выбираются все <div> с классом container, затем исключаются скрытые <div> с классом hidden, и из оставшихся выбираются только те, которые содержат хотя бы один <p>.

Практические рекомендации

  • Использовать CSS-селекторы внутри filter(), not() и has() для короткого и читаемого кода, если фильтрация не требует сложной логики.
  • Использовать функции обратного вызова при необходимости условий на индекс, атрибуты или текстовое содержимое элемента.
  • Комбинировать методы для точного отбора элементов, минимизируя обход DOM.
  • Методы возвращают новые коллекции Umbrella, что позволяет продолжать манипуляции без изменения исходной коллекции.

Примеры комбинированной фильтрации

Выбор четных элементов списка, исключая скрытые и содержащие определённый текст:

u('li')
  .filter(function(el, i) { return i % 2 === 0; })
  .not('.hidden')
  .filter(function(el) { return el.textContent.includes('JavaScript'); });

Выбор всех блоков с классом card, которые содержат хотя бы один заголовок <h2> и не имеют класса archived:

u('.card')
  .has('h2')
  .not('.archived');

Фильтрация выбранных элементов в Umbrella JS обеспечивает чистый, лаконичный и производительный способ управления DOM, позволяя работать исключительно с необходимыми узлами без создания лишних массивов или ручных циклов.

Оглавление