Метод getFilteredItemElements

Метод getFilteredItemElements является одним из ключевых инструментов для работы с фильтрацией элементов в библиотеке Isotope. Он позволяет получить массив DOM-элементов, которые в данный момент соответствуют активному фильтру. Это особенно полезно при динамическом взаимодействии с элементами сетки, когда требуется знать, какие элементы видимы после применения фильтров.

Синтаксис

var filteredElements = iso.getFilteredItemElements();

Параметры: Метод не принимает аргументов.

Возвращаемое значение: Возвращается массив элементов типа HTMLElement, которые прошли текущую фильтрацию. Если фильтр не установлен, массив содержит все элементы сетки.

Применение в фильтрации

Пример базовой фильтрации:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

// Применяем фильтр
iso.arrange({ filter: '.active' });

// Получаем элементы, прошедшие фильтр
var filteredItems = iso.getFilteredItemElements();
console.log(filteredItems); // Выведет массив DOM-элементов с классом 'active'

Здесь метод getFilteredItemElements возвращает только те элементы, которые имеют класс .active. Это позволяет использовать их для дальнейших операций, например, для анимации, подсчета количества или манипуляции атрибутами.

Использование вместе с другими методами Isotope

Метод getFilteredItemElements часто применяется в сочетании с:

  • arrange – для применения фильтрации и сортировки элементов.
  • getItemElements – возвращает все элементы сетки, независимо от фильтрации.
  • on – для отслеживания событий, например, при изменении фильтра.

Пример динамического обновления интерфейса:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

var buttons = document.querySelectorAll('.filter-button');

buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    var filterValue = button.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });

    var visibleItems = iso.getFilteredItemElements();
    console.log('Видимые элементы после фильтрации:', visibleItems.length);
  });
});

Этот подход позволяет динамически получать актуальный набор элементов после каждого изменения фильтрации.

Особенности работы

  1. Возвращает только видимые элементы – элементы, скрытые фильтром, не включаются в массив.
  2. Не меняет порядок элементов – порядок в массиве соответствует их порядку в DOM после применения фильтра.
  3. Можно комбинировать с кастомными фильтрами – метод корректно работает, даже если фильтр задается функцией:
iso.arrange({
  filter: function(itemElem) {
    return itemElem.dataset.price > 100;
  }
});

var expensiveItems = iso.getFilteredItemElements();
console.log(expensiveItems);

В этом случае массив содержит только те элементы, у которых значение data-price больше 100.

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

Метод полезен для:

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

Пример анимации видимых элементов:

var filteredItems = iso.getFilteredItemElements();
filteredItems.forEach(function(item) {
  item.style.transition = 'transform 0.3s';
  item.style.transform = 'scale(1.05)';
});

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

Оглавление