Идентификация и поиск элементов

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

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

const grid = new Muuri('.grid', {
  items: '.item'
});

// Присвоение идентификатора вручную
document.querySelector('.item').setAttribute('data-id', 'item-1');

Методы поиска элементов

1. getItems()

Метод getItems() возвращает массив всех объектов Muuri.Item в сетке. Можно использовать фильтры по индексу, DOM-узлу или функции:

// Получить все элементы
const allItems = grid.getItems();

// Получить элементы по функции
const filteredItems = grid.getItems(item => item.getElement().classList.contains('active'));

Особенность: getItems() всегда возвращает актуальные элементы, включая новые, добавленные после инициализации сетки.

2. getItem(element)

Позволяет получить объект Muuri.Item по конкретному DOM-элементу:

const element = document.querySelector('.item');
const item = grid.getItem(element);

Если элемент не найден в сетке, метод возвращает null.

3. getItems(elements)

Принимает массив DOM-узлов и возвращает массив объектов Muuri.Item:

const elements = document.querySelectorAll('.item.active');
const items = grid.getItems(elements);

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

Фильтрация элементов

Фильтрация позволяет отображать только те элементы, которые удовлетворяют определённым условиям. В Muuri используется метод filter():

grid.filter(item => item.getElement().classList.contains('visible'));

Метод принимает:

  • Функцию: возвращает true для отображаемых элементов.
  • Строку-селектор: выбираются элементы по CSS-селектору.
  • Массив элементов: отображаются только указанные элементы.
// По селектору
grid.filter('.highlight');

// По массиву DOM-элементов
const elements = document.querySelectorAll('.special');
grid.filter(elements);

Фильтрация автоматически обновляет расположение сетки и анимацию перемещений.

Сортировка элементов по идентификатору или свойствам

Метод sort() позволяет упорядочить элементы по ID, внутренним данным или пользовательским атрибутам:

grid.sort((a, b) => {
  const idA = a.getElement().dataset.id;
  const idB = b.getElement().dataset.id;
  return idA.localeCompare(idB);
});

Можно сортировать по:

  • Порядку DOM (itemA.getElement().compareDocumentPosition(itemB.getElement()))
  • Пользовательским данным (item.getElement().dataset.value)
  • Случайным образом:
grid.sort(() => Math.random() - 0.5);

Привязка данных к элементам

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

grid.add([
  {
    element: document.createElement('div'),
    id: 'item-10',
    getData: () => ({ category: 'news', priority: 5 })
  }
]);

Поиск по этим данным реализуется через фильтрующую функцию:

grid.filter(item => item.getData().category === 'news');

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

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

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

// Присвоение категории через data-атрибут
document.querySelector('.item').dataset.category = 'featured';

// Фильтрация по категории
grid.filter(item => item.getElement().dataset.category === 'featured');

Комбинирование фильтров позволяет создавать гибкие интерфейсы:

grid.filter(item => {
  const el = item.getElement();
  return el.dataset.category === 'featured' && el.classList.contains('active');
});

Идентификация элементов при динамическом изменении сетки

Когда элементы добавляются или удаляются динамически, важно:

  1. Присваивать уникальные идентификаторы новым элементам.
  2. Использовать getItem() или getItems() для актуального поиска.
  3. Фильтровать и сортировать после изменений, чтобы поддерживать консистентное отображение.
const newElement = document.createElement('div');
newElement.classList.add('item');
newElement.dataset.id = 'item-11';
grid.add(newElement);
const newItem = grid.getItem(newElement);

Примеры комбинированного поиска

Для сложных сценариев можно комбинировать методы:

const activeFeaturedItems = grid.getItems()
  .filter(item => item.getElement().classList.contains('active'))
  .filter(item => item.getElement().dataset.category === 'featured');

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

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

Оглавление