Фильтрация по data-атрибутам

Isotope предоставляет мощный механизм фильтрации элементов на основе их атрибутов, включая произвольные data-* атрибуты. Такой подход позволяет динамически управлять отображением контента без изменения структуры HTML, сохраняя чистоту разметки и повышая гибкость интерфейса.

Основная концепция фильтрации

Для работы с data-атрибутами важно понимать, что Isotope использует CSS-селекторы в методе filter(). Любой атрибут HTML можно использовать в селекторе через квадратные скобки:

// Фильтрация элементов с data-category="photo"
$grid.isotope({ filter: '[data-category="photo"]' });

Здесь [data-category="photo"] – стандартный CSS-селектор атрибута, который Isotope интерпретирует для отображения только подходящих элементов.

Множественные условия

Фильтрация по нескольким атрибутам возможна через комбинацию селекторов:

// Элементы с data-category="photo" и data-status="published"
$grid.isotope({ filter: '[data-category="photo"][data-status="published"]' });

Важно соблюдать порядок и синтаксис селекторов, так как Isotope использует стандартные правила CSS для сопоставления элементов.

Динамическая фильтрация

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

let category = 'photo';
let status = 'published';

let filterValue = `[data-category="${category}"][data-status="${status}"]`;

$grid.isotope({ filter: filterValue });

Такой подход позволяет изменять параметры фильтрации в зависимости от пользовательских действий или данных с сервера, не меняя код вызова Isotope.

Фильтрация с несколькими вариантами значений

Иногда необходимо фильтровать элементы, у которых атрибут соответствует одному из нескольких значений. В CSS это реализуется через запятую:

// Фильтрация элементов с data-category="photo" или "video"
$grid.isotope({ filter: '[data-category="photo"], [data-category="video"]' });

Isotope корректно интерпретирует такую запись и отобразит все элементы, соответствующие хотя бы одному из условий.

Использование функций фильтрации

Isotope поддерживает фильтры в виде функций, что позволяет реализовать сложные проверки, выходящие за рамки CSS-селекторов:

$grid.isotope({
  filter: function() {
    let category = this.getAttribute('data-category');
    let status = this.getAttribute('data-status');
    return category === 'photo' && status === 'published';
  }
});

Преимущество такого подхода — возможность использовать произвольную логику, например, регулярные выражения или динамическое сравнение числовых значений.

Фильтрация по диапазону значений

Иногда data-атрибут содержит числовые значения, и требуется отфильтровать элементы по диапазону:

$grid.isotope({
  filter: function() {
    let price = parseFloat(this.getAttribute('data-price'));
    return price >= 100 && price <= 500;
  }
});

Здесь Isotope позволяет отфильтровать элементы на основе вычислений, что невозможно сделать стандартными CSS-селекторами.

Интеграция с пользовательским интерфейсом

Для фильтрации на основе data-атрибутов удобно использовать кнопки или выпадающие списки. Например:

$('.filter-button').on('click', function() {
  let filterCategory = $(this).attr('data-filter');
  $grid.isotope({ filter: `[data-category="${filterCategory}"]` });
});

Комбинация динамического выбора и data-атрибутов обеспечивает полностью интерактивный интерфейс, где каждый элемент может иметь множество атрибутов для фильтрации.

Оптимизация работы с data-атрибутами

  • Использовать короткие и уникальные имена атрибутов (data-cat, data-status) для повышения производительности селекторов.
  • Избегать сложных вложенных селекторов, так как Isotope каждый раз выполняет обход всех элементов контейнера.
  • При больших коллекциях элементов лучше использовать функциональные фильтры, так как они дают полный контроль над логикой и предотвращают множественные пересечения селекторов.

Вывод

Фильтрация по data-атрибутам в Isotope сочетает простоту CSS-селекторов с мощью функций для динамической логики. Такой подход позволяет создавать гибкие и масштабируемые интерфейсы с возможностью множественных условий, диапазонов и пользовательских фильтров без изменения исходной разметки HTML.

Оглавление