Навигация по siblings

Dom7 — это компактная и высокоэффективная библиотека для работы с DOM в JavaScript, часто используемая вместе с фреймворком Framework7, но применимая и отдельно. Одной из важных возможностей является навигация между элементами, находящимися на одном уровне в DOM-дереве — так называемые siblings.

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

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

В Dom7 доступны методы для получения ближайших соседей элемента:

next()

Метод next() возвращает следующий sibling относительно выбранного элемента. Если элементов несколько, метод возвращает для каждого элемента коллекцию, соответствующую следующему sibling.

const item = $$('.item.active');
const nextItem = item.next();
  • Если необходимо получить только первый элемент следующего sibling, можно использовать:
const firstNext = item.next()[0];
  • Метод также поддерживает CSS-селекторы для фильтрации:
const nextButton = item.next('.button');

В этом случае возвращается следующий sibling, который соответствует классу .button.

prev()

Метод prev() работает аналогично next(), но возвращает предыдущий sibling.

const prevItem = item.prev();
  • Можно фильтровать по селектору:
const prevButton = item.prev('.button');

siblings()

Метод siblings() возвращает все элементы на том же уровне, исключая сам исходный элемент.

const allSiblings = item.siblings();
  • Фильтрация по селектору:
const visibleSiblings = item.siblings('.visible');
  • Используется для применения изменений сразу ко всем соседним элементам:
item.siblings().removeClass('active');

Цепочка методов для сложной навигации

Dom7 позволяет комбинировать методы для точного выбора элементов:

$$('.item.active')
  .siblings('.highlight')  // выбираем соседей с классом highlight
  .next()                  // получаем следующий элемент для каждого
  .addClass('next-active'); // добавляем класс

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

Применение фильтров и условий

Методы навигации возвращают коллекцию Dom7, поэтому можно использовать стандартные методы перебора:

$$('.item.active').siblings().each((el, index) => {
  if (!el.classList.contains('disabled')) {
    el.style.backgroundColor = 'yellow';
  }
});
  • each принимает функцию с двумя параметрами: элемент (el) и индекс (index).
  • Позволяет гибко применять изменения только к нужным соседям.

Работа с группами элементов

Если выбрать несколько элементов, Dom7 применяет методы ко всем выбранным элементам одновременно:

$$('.list-item.active').next().addClass('highlight');

  • Здесь next() применяется для каждого активного элемента, и к каждому следующему sibling добавляется класс .highlight.

  • Аналогично, siblings() возвращает всех соседей для каждого элемента коллекции, что позволяет легко работать с множественными элементами без дополнительных циклов.

Практические советы

  1. Фильтрация по селектору сокращает количество ненужных манипуляций:
item.siblings('div').addClass('visible');
  1. Комбинация с другими методами Dom7 повышает выразительность:
item.prev().find('span').text('Обновлено');

  1. Методы возвращают Dom7 коллекцию, а не обычный массив, поэтому доступны все методы библиотеки (addClass, removeClass, css, attr и т.д.).

  2. Для чистого доступа к нативному DOM-элементу используется индекс или метод .get(index):

const firstSibling = item.siblings().get(0);
  1. Использование siblings() удобно для изменения состояния элементов в группах, например при переключении вкладок или галерей.

Отличия от чистого JavaScript

В чистом JavaScript для получения siblings приходилось использовать сочетание parentNode и children, фильтровать массивы и проверять элементы вручную. Dom7 значительно сокращает эти операции:

// Чистый JS
const siblings = Array.from(item.parentNode.children).filter(el => el !== item);
// Dom7
const siblings = item.siblings();
  • Dom7 автоматически возвращает коллекцию с методами для манипуляции, без необходимости писать фильтры и циклы.

Навигация по siblings в Dom7 — мощный инструмент для работы с элементами на одном уровне DOM, позволяющий быстро получать соседние элементы, фильтровать их и применять изменения с минимальным кодом и высокой читаемостью.

Оглавление