Получение элементов из Grid

Библиотека Muuri предоставляет набор методов для получения элементов сетки (Grid) в различных состояниях. Эти методы позволяют извлекать элементы по индексу, по состоянию видимости, активности, сортировки, фильтрации, а также получать конкретные экземпляры объектов Item. Управление элементами сетки является ключевой частью динамических интерфейсов, где требуется программный доступ к содержимому Grid.

Каждый элемент в Muuri представлен объектом Muuri.Item, который содержит ссылку на DOM-элемент и внутренние данные, необходимые для управления позицией, состоянием и поведением элемента внутри сетки.

Метод getItems()

Основной способ получения элементов из сетки — использование метода getItems(). Этот метод возвращает массив объектов Item.

var items = grid.getItems();

Возвращаемое значение:

Array<Muuri.Item>

Каждый объект в массиве содержит методы и свойства для работы с соответствующим элементом сетки.

Получение всех элементов

var items = grid.getItems();

items.forEach(function(item) {
  console.log(item.getElement());
});

Метод getElement() возвращает DOM-узел элемента.

Получение элементов по индексу

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

var firstItem = grid.getItems(0);

Также допускается получение нескольких элементов:

var items = grid.getItems([0, 2, 5]);

Muuri автоматически возвращает массив объектов Item, соответствующих указанным индексам.

Пример

var items = grid.getItems([1, 3]);

items.forEach(function(item) {
  console.log(item.getElement().textContent);
});

Получение элементов по DOM-элементу

Метод getItems() поддерживает получение элементов через ссылку на DOM-узел.

var element = document.querySelector('.item');

var item = grid.getItems(element);

Muuri сопоставляет DOM-узел с соответствующим объектом Item.

Получение нескольких элементов

var elements = document.querySelectorAll('.item');

var items = grid.getItems(elements);

Это позволяет легко связать работу библиотеки с существующей разметкой.

Получение элементов по объекту Item

Если уже имеется экземпляр Item, его можно повторно получить через getItems().

var items = grid.getItems(itemInstance);

Метод возвращает массив, содержащий тот же объект.

Получение элементов по селектору

Muuri позволяет получать элементы, используя CSS-селектор.

var items = grid.getItems('.active');

Muuri сопоставляет селектор с DOM-элементами внутри Grid и возвращает соответствующие Item.

Получение активных элементов

Активными считаются элементы, участвующие в текущем расположении сетки.

Получение активных элементов:

var activeItems = grid.getItems().filter(function(item) {
  return item.isActive();
});

Метод isActive() проверяет, участвует ли элемент в текущей раскладке.

Получение неактивных элементов

Неактивные элементы — это элементы, временно исключённые из раскладки (например, при фильтрации).

var inactiveItems = grid.getItems().filter(function(item) {
  return !item.isActive();
});

Получение видимых элементов

Muuri поддерживает управление видимостью элементов через методы show() и hide().

Проверка состояния осуществляется методом isVisible().

var visibleItems = grid.getItems().filter(function(item) {
  return item.isVisible();
});

Получение скрытых элементов

var hiddenItems = grid.getItems().filter(function(item) {
  return !item.isVisible();
});

Такая операция полезна при динамическом управлении фильтрацией или анимацией элементов.

Получение элементов после сортировки

После применения метода sort() порядок элементов в Grid изменяется. Метод getItems() возвращает элементы в текущем порядке расположения.

grid.sort(function(a, b) {
  return a.getElement().dataset.id - b.getElement().dataset.id;
});

var items = grid.getItems();

Полученный массив соответствует текущему порядку элементов в сетке.

Получение первого элемента

var firstItem = grid.getItems()[0];

Поскольку getItems() возвращает массив, можно использовать стандартные методы работы с массивами.

Получение последнего элемента

var items = grid.getItems();
var lastItem = items[items.length - 1];

Получение DOM-элемента из Item

Каждый объект Item предоставляет метод:

item.getElement();

Пример:

var items = grid.getItems();

items.forEach(function(item) {
  var element = item.getElement();
  console.log(element);
});

Это позволяет работать с DOM напрямую, например изменять стили или содержимое.

Получение индекса элемента

Для определения позиции элемента используется метод getItems() вместе с индексом массива.

var items = grid.getItems();
var index = items.indexOf(item);

Индекс соответствует позиции элемента в текущем порядке Grid.

Получение количества элементов

Количество элементов определяется длиной массива.

var count = grid.getItems().length;

console.log(count);

Это значение включает как активные, так и неактивные элементы.

Получение элементов после фильтрации

После применения метода filter() часть элементов становится неактивной.

grid.filter('.visible');

Получение активных элементов:

var items = grid.getItems().filter(function(item) {
  return item.isActive();
});

Получение скрытых:

var items = grid.getItems().filter(function(item) {
  return !item.isActive();
});

Использование getItems() в цепочках операций

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

Пример изменения стилей:

grid.getItems().forEach(function(item) {
  item.getElement().style.background = 'red';
});

Пример добавления классов:

grid.getItems().forEach(function(item) {
  item.getElement().classList.add('processed');
});

Преобразование элементов в DOM-массив

Для работы с DOM-элементами можно преобразовать массив Item в массив элементов.

var elements = grid.getItems().map(function(item) {
  return item.getElement();
});

Теперь elements содержит обычные DOM-узлы.

Получение элементов для последующих операций Muuri

Многие методы Muuri принимают массив объектов Item.

Например, перемещение элементов:

var items = grid.getItems([0, 1]);

grid.move(items, 5);

Получение элементов для удаления

var items = grid.getItems([2, 3]);

grid.remove(items);

Muuri принимает массив объектов Item, поэтому getItems() используется для подготовки данных.

Проверка существования элемента в Grid

var element = document.querySelector('.item');

var items = grid.getItems(element);

if (items.length) {
  console.log('Элемент присутствует в сетке');
}

Если элемент не принадлежит Grid, возвращается пустой массив.

Получение элементов для массовых операций

Метод getItems() часто применяется для выполнения массовых операций:

  • изменение содержимого
  • обновление данных
  • сортировка
  • фильтрация
  • удаление

Пример:

grid.getItems().forEach(function(item) {
  var el = item.getElement();
  el.dataset.processed = true;
});

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

Ключевые характеристики getItems():

1. Всегда возвращает массив

Даже если запрошен один элемент:

var item = grid.getItems(0);

Результат:

[Item]

2. Поддерживает разные типы аргументов

  • индекс
  • массив индексов
  • DOM-элемент
  • NodeList
  • объект Item
  • CSS-селектор

3. Возвращает элементы в текущем порядке Grid

Порядок массива соответствует текущему расположению элементов после сортировки, фильтрации и перемещения.

Практический пример

var grid = new Muuri('.grid');

var items = grid.getItems();

items.forEach(function(item) {
  var element = item.getElement();
  var title = element.querySelector('.title');

  if (title) {
    console.log(title.textContent);
  }
});

В этом примере:

  • извлекаются все элементы Grid
  • из каждого элемента получаются DOM-узлы
  • выполняется поиск вложенных элементов
  • выводится содержимое.

Работа с полученными элементами в пользовательской логике

Полученные объекты Item могут использоваться для:

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

Таким образом, метод getItems() является центральным механизмом доступа к элементам Muuri Grid и служит основой для большинства программных операций с сеткой.

Оглавление