Метод getItemElements

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

Синтаксис

var elements = iso.getItemElements();
  • iso — экземпляр Isotope.
  • elements — массив DOM-элементов, соответствующих текущим элементам сетки.

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

  1. Возврат исходных DOM-элементов Метод возвращает только оригинальные DOM-узлы, используемые Isotope, а не обёрнутые объекты или внутренние структуры библиотеки.

  2. Не фильтрует элементы getItemElements возвращает все элементы, независимо от текущего фильтра или сортировки. Если требуется получить только видимые элементы после применения фильтра, необходимо использовать метод filteredItems и получить их свойства .element.

  3. Синхронизация с динамическим добавлением элементов После добавления элементов через метод appended или удаления через remove метод getItemElements обновляет возвращаемый массив, отражая текущее состояние сетки.

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

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

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

var allElements = iso.getItemElements();
console.log(allElements); // Array of all grid-item DOM elements

Комбинирование с фильтрацией

var filteredElements = iso.filteredItems.map(function(item) {
  return item.element;
});
console.log(filteredElements); // DOM-элементы, соответствующие текущему фильтру

Использование для динамических операций

var newItems = document.querySelectorAll('.new-item');
iso.appended(newItems);

var updatedElements = iso.getItemElements();
console.log(updatedElements.length); // Общее количество элементов после добавления

Практические сценарии

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

  • Экспорт текущего состояния сетки Можно собрать массив всех элементов для последующего сохранения состояния, генерации отчётов или интеграции с внешними скриптами.

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

Важные моменты

  • Метод не вызывает перестройку сетки и не изменяет её состояние.
  • Возвращаемый массив не является “живым”: добавление или удаление элементов после вызова метода не изменяет уже полученный массив.
  • Для получения актуальной информации необходимо вызывать getItemElements после любых изменений сетки (добавление, удаление, фильтрация).

Отличие от других методов Isotope

Метод Возвращаемое значение Примечание
getItemElements Массив всех DOM-элементов сетки Полный список, не учитывает фильтр
filteredItems Массив объектов { element, layout, ... } Только видимые элементы после фильтра
getFilteredItemElements Массив DOM-элементов, прошедших фильтр Совместимость с фильтрацией, удобнее для UI-операций

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

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

Оглавление