Фильтрация массивов

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

Метод .filter()

Метод .filter() используется для выборки элементов из коллекции на основе условия, задаваемого функцией обратного вызова.

Синтаксис:

collection.filter(callback)
  • callback — функция, возвращающая true для элементов, которые должны остаться в результирующей коллекции, и false для исключения.

Пример работы с DOM-элементами:

var items = $('li'); // коллекция элементов <li>
var visibleItems = items.filter(function(index, element) {
    return $(element).is(':visible');
});

Здесь visibleItems содержит только те элементы <li>, которые видимы на странице. Аргументы index и element позволяют использовать позицию элемента в коллекции и сам DOM-элемент для сложных условий фильтрации.

Метод .not()

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

Синтаксис:

collection.not(selectorOrFunction)
  • selectorOrFunction — CSS-селектор или функция, возвращающая true для элементов, которые должны быть исключены.

Пример:

var items = $('li');
var activeItems = items.not('.disabled');

Результатом будет коллекция <li>, исключающая элементы с классом disabled.

Фильтрация массивов данных

Zepto также предоставляет методы для работы с обычными JavaScript-массивами. Например, можно использовать $.map() и встроенный метод filter() массивов:

var numbers = [1, 2, 3, 4, 5];
var evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});

Результат: [2, 4].

В контексте Zepto часто используется комбинация методов для фильтрации DOM-коллекций и извлечения данных:

var activeIds = $('li').filter('.active').map(function(index, el) {
    return $(el).data('id');
}).get();
  • .map() преобразует каждый элемент коллекции.
  • .get() возвращает обычный массив JavaScript вместо объекта Zepto.

Метод .has()

Метод .has() фильтрует элементы коллекции по наличию вложенных элементов, соответствующих селектору.

Синтаксис:

collection.has(selector)

Пример:

var listItemsWithLinks = $('li').has('a');

listItemsWithLinks будет содержать только те <li>, которые имеют внутри себя хотя бы один <a>.

Функция обратного вызова

Функции обратного вызова для методов фильтрации принимают два параметра:

  1. index — позиция элемента в коллекции.
  2. element — текущий DOM-элемент.

Функция должна возвращать логическое значение (true или false). При использовании this внутри функции оно ссылается на текущий DOM-элемент:

$('li').filter(function() {
    return $(this).text().length > 5;
});

В этом примере остаются только элементы <li> с текстом длиной более пяти символов.

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

Zepto позволяет объединять несколько методов фильтрации для точного выбора элементов:

var visibleActiveItems = $('li')
    .filter('.active')
    .filter(function() { return $(this).is(':visible'); })
    .not('.disabled');

Результат — коллекция <li>, которые активны, видимы и не имеют класс disabled.

Практические советы

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

Отличие от нативного Array.prototype.filter

В Zepto .filter() работает с коллекциями DOM-элементов, а не с обычными массивами. Для массивов JavaScript используется стандартный метод filter(). Отличие проявляется в том, что методы Zepto возвращают объект коллекции Zepto, позволяющий сразу применять другие методы библиотеки.

Фильтрация массивов и коллекций в Zepto — универсальный инструмент для выборки элементов по сложным условиям, комбинируя удобство CSS-селекторов и гибкость JavaScript-функций.

Оглавление