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

Umbrella JS предоставляет удобный и лаконичный API для работы с DOM, включая методы для навигации между элементами. Основная задача этих методов — перемещение по дереву DOM относительно выбранных элементов, что позволяет легко управлять их соседями, родителями и потомками без необходимости вручную обходить parentNode или nextSibling.

Методы для доступа к соседям

.next() Метод возвращает следующий элемент на том же уровне DOM. Если элемент является последним среди своих соседей, возвращается пустой объект Umbrella.

u('.item').next(); // Получает следующий элемент с классом .item

Особенности использования:

  • Возвращается объект Umbrella, что позволяет продолжить цепочку методов.
  • Можно передавать селектор для фильтрации:
u('.item').next('.highlight'); // Следующий сосед, который соответствует селектору .highlight

.prev() Возвращает предыдущий элемент на том же уровне. Работает аналогично .next(), но в обратном направлении.

u('.item').prev(); // Получает предыдущий элемент
u('.item').prev('.highlight'); // Только если предыдущий соответствует селектору

Комбинированные методы

.siblings() Позволяет получить всех соседей элемента, исключая сам элемент.

u('.item').siblings(); // Все элементы на том же уровне, кроме выбранного

Применение селектора:

u('.item').siblings('.active'); // Только те соседи, которые имеют класс .active

.nextAll() и .prevAll() Эти методы возвращают все последующие или предыдущие элементы на том же уровне. Это удобно, когда нужно работать не с одним соседом, а с группой элементов.

u('.item').nextAll(); // Все следующие элементы после .item
u('.item').prevAll('.highlight'); // Все предыдущие элементы с классом .highlight

Навигация к родителям и потомкам

Хотя задача сосредоточена на соседях, часто требуется работать и с элементами выше или ниже в DOM. Umbrella JS предоставляет следующие методы:

.parent() Возвращает непосредственного родителя выбранного элемента.

u('.item').parent(); // Родитель элемента .item

.parents() Возвращает всех родителей до корня документа. Можно использовать селектор для фильтрации.

u('.item').parents('.container'); // Все родительские элементы с классом .container

.children() Возвращает прямых потомков выбранного элемента.

u('.list').children(); // Все прямые дочерние элементы .list
u('.list').children('.item'); // Только элементы с классом .item

Практическая цепочка методов

Umbrella JS поддерживает цепочку методов, что позволяет комбинировать навигацию и фильтрацию элементов без промежуточных переменных.

u('.item')
  .next()
  .children('.title')
  .addClass('highlight');

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

  1. Находим следующий сосед элемента .item.
  2. Получаем всех его дочерних элементов с классом .title.
  3. Добавляем к ним класс highlight.

Отличия от jQuery

Umbrella JS позиционируется как легковесная альтернатива jQuery. Основные отличия при навигации:

  • Методы возвращают объект Umbrella, а не массив, обеспечивая цепочку вызовов.
  • API минималистичен, методы не перегружены лишними опциями.
  • Поддержка селекторов встроена в методы .next(), .prev(), .siblings(), .children() и .parents().

Выбор подходящего метода

Цель Метод
Получить соседний элемент .next(), .prev()
Получить всех соседей .siblings()
Получить все последующие или предыдущие .nextAll(), .prevAll()
Перейти к родителю .parent(), .parents()
Получить дочерние элементы .children()

Случаи использования

  1. Переключение активного состояния соседних элементов
u('.active').next().addClass('active').prev().removeClass('active');
  1. Навигация по списку для пагинации
u('.page-current').nextAll().first().addClass('page-current');
  1. Поиск заголовков внутри следующего блока
u('.section-title').next().children('h2').css('color', 'red');

Методы навигации Umbrella JS обеспечивают удобную работу с DOM на соседних уровнях без громоздкого кода, сохраняя цепочку вызовов и минимализм синтаксиса.

Оглавление