Фильтрация коллекций

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

Метод .filter()

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

Синтаксис:

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

Параметры:

  • селектор — строка CSS-селектора. Элементы, соответствующие этому селектору, остаются в коллекции.

  • функция(index, element) — функция обратного вызова, возвращающая true для элементов, которые должны быть включены в новую коллекцию.

    • index — порядковый номер элемента в исходной коллекции.
    • element — текущий элемент DOM.

Примеры:

// Фильтрация по классу
$('li').filter('.active');

// Фильтрация по содержимому через функцию
$('li').filter(function(index, element) {
    return $(element).text().includes('jQuery');
});

Метод .filter() всегда возвращает новый объект jQuery. Исходная коллекция не изменяется.

Метод .not()

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

Синтаксис:

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

Примеры:

// Исключение элементов с классом .disabled
$('button').not('.disabled');

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

Метод .not() полезен для удаления элементов из коллекции без необходимости изменять исходный DOM напрямую.

Метод .has()

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

Синтаксис:

$(селектор).has(внутреннийСелектор)

Примеры:

// Все div, содержащие хотя бы один элемент p
$('div').has('p');

// Сложная фильтрация с несколькими уровнями
$('ul').has('li.active');

Метод .has() удобно использовать для поиска контейнеров с определённым содержимым.

Метод .is()

Метод .is() проверяет, соответствует ли хотя бы один элемент в коллекции указанному селектору, функции или объекту jQuery. Он возвращает булево значение (true или false).

Синтаксис:

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

Примеры:

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

// Проверка через функцию
if ($('li').is(function(index, element) {
    return $(element).text() === 'Important';
})) {
    console.log('Найден важный элемент');
}

.is() часто используется для условий в логике программного кода, когда необходимо узнать, есть ли элементы, соответствующие определённому критерию.

Метод .eq() и фильтрация по индексу

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

Синтаксис:

$(селектор).eq(индекс)

Примеры:

// Первый элемент списка
$('li').eq(0);

// Последний элемент списка
$('li').eq(-1);

Метод .eq() возвращает объект jQuery, что позволяет применять к нему дальнейшие методы цепочкой.

Метод .first() и .last()

Эти методы являются специализированными версиями .eq(), возвращающими соответственно первый или последний элемент коллекции.

$('li').first(); // первый элемент
$('li').last();  // последний элемент

Использование этих методов повышает читаемость кода при работе с крайними элементами коллекции.

Метод .slice()

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

Синтаксис:

$(селектор).slice(start, end)

Примеры:

// Выбрать элементы со второго по четвертый
$('li').slice(1, 4);

Метод .slice() возвращает новый объект jQuery и не изменяет исходную коллекцию.

Соединение фильтров

jQuery позволяет комбинировать методы фильтрации для создания более сложных условий:

// Все активные li, кроме первого и последнего
$('li').filter('.active').not(':first').not(':last');

// Все div с классом .container, которые содержат p
$('div.container').has('p').filter(':visible');

Комбинация фильтров обеспечивает гибкость и лаконичность кода при работе с коллекциями элементов.

Важные моменты при фильтрации

  • Методы фильтрации возвращают новый объект jQuery, что позволяет использовать цепочку методов.
  • Методы .filter(), .not(), .has() и .is() принимают как селекторы, так и функции, что расширяет возможности динамического отбора элементов.
  • Для быстрого доступа к элементам по индексу удобно использовать .eq(), .first(), .last() и .slice().
  • Фильтрация не изменяет DOM. Она лишь создаёт новую коллекцию элементов, соответствующих условиям.

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

Оглавление