Фильтрация выборки

Фильтрация выборки в Zepto.js — это процесс выделения из набора элементов DOM тех, которые соответствуют определённым критериям. Она позволяет работать только с нужными элементами, минимизируя количество операций и упрощая код. Основные методы фильтрации в Zepto имеют схожий синтаксис с jQuery, но библиотека оптимизирована для лёгкости и скорости.

Метод filter()

Метод filter возвращает новый объект Zepto, содержащий только элементы, которые соответствуют переданному условию.

Синтаксис:

$(селектор).filter(условие)

Параметры:

  • условие может быть:

    • CSS-селектором (строка),
    • функцией, возвращающей true или false,
    • объектом DOM-элемента.

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

// Выбор всех элементов <li> с классом "active"
$('li').filter('.active');

// Фильтрация с функцией
$('li').filter(function(index, element) {
    return $(element).text().length > 5;
});

Метод filter не изменяет исходную выборку, а возвращает новую коллекцию. Это позволяет использовать цепочки методов без изменения исходного набора элементов.

Метод not()

Метод not выполняет обратную задачу: исключает элементы, которые соответствуют условию.

Синтаксис:

$(селектор).not(условие)

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

// Исключить все <li> с классом "disabled"
$('li').not('.disabled');

// Исключить элементы по условию функции
$('li').not(function(index, element) {
    return $(element).hasClass('hidden');
});

not() возвращает новый объект Zepto с оставшимися элементами. Этот метод особенно полезен для быстрого исключения нежелательных элементов из выборки.

Метод is()

Метод is проверяет, соответствует ли хотя бы один элемент в выборке указанному условию. Возвращает логическое значение true или false.

Синтаксис:

$(селектор).is(условие)

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

// Проверка наличия хотя бы одного элемента с классом "active"
if ($('li').is('.active')) {
    console.log('Есть активные элементы');
}

// Проверка с функцией
if ($('li').is(function(index, element) {
    return $(element).text().includes('Hello');
})) {
    console.log('Есть элементы с текстом Hello');
}

is() удобен для условий внутри условных конструкций и логических выражений.

Метод has()

Метод has фильтрует элементы, оставляя только те, которые содержат внутри себя указанные дочерние элементы.

Синтаксис:

$(селектор).has(селектор_дочернего_элемента)

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

// Выбор всех <div>, которые содержат <p>
$('div').has('p');

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

Метод has работает только на потомках и не ищет совпадения в самих элементах, а исключительно в их содержимом.

Метод children() с фильтром

Метод children возвращает прямых потомков элементов и позволяет дополнительно фильтровать их по селектору.

Синтаксис:

$(селектор).children(селектор_фильтра)

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

// Прямые потомки <li> с классом "highlight" у <ul>
$('ul').children('li.highlight');

// Получение всех дочерних элементов без фильтрации
$('div.container').children();

Использование фильтра позволяет уменьшить объём возвращаемой коллекции и работать только с релевантными элементами DOM.

Метод find() с фильтрацией

Метод find ищет все потомки, соответствующие селектору, внутри элементов исходной выборки. Его часто комбинируют с фильтрацией для точного выделения нужных элементов.

Синтаксис:

$(селектор).find(селектор_потомка)

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

// Найти все <span> внутри <div>
$('div').find('span');

// Найти все <a> с классом "external" внутри <nav>
$('nav').find('a.external');

Комбинирование с filter() позволяет строить сложные цепочки фильтрации:

$('ul').find('li').filter('.active');

Фильтрация с функциями

Функции фильтрации в Zepto принимают два параметра: индекс элемента и сам элемент DOM. Внутри функции можно использовать методы Zepto для дополнительной проверки.

Пример:

$('div').filter(function(index, element) {
    return $(element).children().length > 2 && $(element).hasClass('box');
});

Такая фильтрация гибкая и позволяет учитывать сложные условия, которые невозможно задать через CSS-селекторы.

Комбинирование методов фильтрации

Zepto поддерживает цепочки методов, что позволяет последовательно уточнять выборку:

$('ul')
    .children('li')
    .not('.disabled')
    .filter(function(index, el) {
        return $(el).text().length > 3;
    });

В этом примере последовательность методов отбирает прямых потомков <li>, исключает элементы с классом .disabled и оставляет только те, у которых текст длиннее трёх символов.

Фильтрация выборки в Zepto.js обеспечивает точный контроль над набором элементов DOM. Понимание методов filter, not, is, has, children и find, а также их комбинирование, позволяет создавать компактный, читаемый и эффективный код для работы с элементами веб-страницы.

Оглавление