Навигация по соседним элементам

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

Основные методы навигации

.next() Метод возвращает следующий соседний элемент текущего узла в DOM-дереве. Если элемент отсутствует, возвращается undefined.

let current = Bliss('#item-1');
let nextItem = current.next(); // следующий элемент после #item-1

.prev() Возвращает предыдущий соседний элемент. Позволяет двигаться по DOM вверх, относительно текущего узла.

let previousItem = current.prev(); // предыдущий элемент перед #item-1

.siblings() Возвращает массив всех соседних элементов, исключая сам элемент, от которого был вызван метод. Этот метод полезен для перебора всех элементов одного уровня.

let siblings = current.siblings(); // все элементы на одном уровне с #item-1
siblings.forEach(el => console.log(el));

.first() и .last() Методы позволяют быстро выбрать первый или последний элемент среди набора соседних элементов или потомков.

let firstSibling = current.siblings().first();
let lastSibling = current.siblings().last();

Навигация с фильтрацией

Bliss.js позволяет комбинировать методы навигации с фильтрацией по селекторам или условиям.

let nextVisible = current.next(':visible'); // следующий видимый элемент
let prevButton = current.prev('button'); // предыдущий элемент типа <button>

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

Работа с вложенными элементами

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

let childNext = current.children().first().next(); // следующий сосед первого дочернего элемента

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

Цепочки навигации

Bliss.js поддерживает цепочки вызовов, что упрощает перемещение по DOM:

let target = Bliss('#container')
                .children('.item')
                .first()
                .next()
                .next(); // второй сосед первого дочернего элемента #container

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

Взаимодействие с событиями

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

Bliss('.item').on('click', function() {
    this.next().toggleClass('active'); // переключение класса у следующего элемента
});

Особенности поведения

Методы .next() и .prev() работают только с элементами уровня Element, игнорируя текстовые узлы.
Если соседний элемент отсутствует, возвращается undefined, что позволяет удобно проверять наличие элементов.
Методы .siblings(), .children() и .parent() возвращают коллекции Bliss, поддерживающие все стандартные методы библиотеки.