Итерация по коллекциям

Cash — это компактная и быстрая библиотека, вдохновлённая jQuery, предназначенная для работы с DOM и коллекциями элементов. Важной частью её функционала является эффективная итерация по коллекциям элементов, что позволяет выполнять операции над набором элементов без явных циклов for или forEach.

Метод .each()

Метод .each() используется для перебора всех элементов коллекции. Синтаксис:

$(selector).each(function(index, element) {
    // действия с element
});

Параметры:

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

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

$('.item').each(function(index, element) {
    element.textContent = `Элемент №${index + 1}`;
});

Особенности:

  • Внутри функции this ссылается на текущий DOM-элемент.
  • Возврат false из функции прекращает дальнейшую итерацию (аналог break в цикле).

Метод .map()

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

const texts = $('.item').map(function(index, element) {
    return element.textContent.toUpperCase();
}).get();

Ключевые моменты:

  • Возвращает объект Cash, если не используется .get().
  • Метод .get() преобразует результат в обычный массив.
  • Можно использовать для фильтрации и трансформации элементов одновременно.

Метод .filter()

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

const visibleItems = $('.item').filter(function(index, element) {
    return element.offsetParent !== null; // проверка на видимость
});

Особенности:

  • Возвращает новый объект Cash, что позволяет продолжать цепочку вызовов.
  • Внутри функции this также ссылается на текущий DOM-элемент.

Метод .find()

Метод .find() ищет дочерние элементы в рамках каждой позиции коллекции. Возвращает новую коллекцию Cash.

const inputs = $('.form').find('input[type="text"]');
  • Отличие от стандартного селектора: поиск ограничен текущими элементами коллекции, а не всем документом.
  • Позволяет строить сложные и вложенные цепочки поиска.

Метод .not()

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

const itemsWithoutActive = $('.item').not('.active');
  • Функция в .not() аналогична фильтру:
$('.item').not(function(index, element) {
    return element.textContent.includes('skip');
});
  • Результат также объект Cash, позволяющий продолжить цепочку вызовов.

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

Эти методы выбирают соответственно первый и последний элемент коллекции:

const firstItem = $('.item').first();
const lastItem = $('.item').last();

Особенности:

  • Возвращают объект Cash, содержащий один элемент.
  • Полезны для оптимизации итераций, когда нужно обработать крайние элементы.

Цепочки методов для итерации

Cash позволяет комбинировать методы для сложной обработки коллекций. Пример:

$('.item')
    .filter('.active')
    .find('input')
    .each(function(index, element) {
        element.value = `Активный ${index + 1}`;
    });

Пошаговое объяснение:

  1. Отбор элементов с классом active.
  2. Поиск всех input внутри этих элементов.
  3. Изменение значения каждого найденного элемента через .each().

Важные нюансы работы с итерациями

  1. Контекст this всегда ссылается на текущий DOM-элемент внутри .each(), .map(), .filter() и .not().
  2. Методы возвращают Cash, что позволяет использовать цепочки.
  3. Для получения обычного массива используют .get().
  4. Итерация безопасна даже при изменении DOM внутри цикла, но при удалении элементов стоит быть осторожным, чтобы не нарушить порядок коллекции.

Практическое использование

  • Изменение атрибутов сразу на всех элементах:
$('.link').attr('target', '_blank');
  • Добавление стилей к определённым элементам через фильтр:
$('.item').filter('.highlight').css('color', 'red');
  • Массив значений элементов формы:
const values = $('input[type="text"]').map(function(_, el) {
    return el.value.trim();
}).get();

Эта система методов делает работу с коллекциями в Cash удобной, читаемой и производительной, позволяя избегать громоздких циклов и поддерживать чистоту кода. Итерация становится контролируемой, гибкой и легко комбинируемой с другими операциями над DOM.

Оглавление