Получение конкретного элемента из коллекции

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

Метод eq()

Метод eq() позволяет выбрать элемент коллекции по индексу, возвращая новый объект Umbrella JS, содержащий только этот элемент.

u('li').eq(2); // Возвращает третий элемент списка <li>

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

  • Индексация начинается с 0.
  • Если индекс отрицательный, подсчет идет с конца коллекции. Например, eq(-1) вернет последний элемент.
  • Возвращается новый объект Umbrella JS, поэтому к результату можно применять все стандартные методы библиотеки:
u('li').eq(0).addClass('active');

Доступ через квадратные скобки

Каждый объект Umbrella JS поддерживает доступ к отдельным DOM-элементам через индекс, как в обычном массиве:

let firstItem = u('li')[0]; // Получение первого <li> как обычного DOM-элемента
firstItem.textContent = 'Измененный текст';

Разница с eq():

  • eq() возвращает объект Umbrella JS, что позволяет продолжать цепочку методов.
  • Квадратные скобки возвращают чистый DOM-элемент, с которым методы Umbrella уже нельзя вызывать напрямую.

Метод first() и last()

Для часто используемых случаев выбора первого или последнего элемента существуют удобные методы:

u('li').first(); // Первый элемент
u('li').last();  // Последний элемент

Эти методы эквивалентны:

u('li').eq(0);        // first()
u('li').eq(-1);       // last()

Использование first() и last() повышает читаемость кода и делает намерение очевидным.

Примеры комбинирования с другими методами

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

// Добавление класса только третьему элементу
u('li').eq(2).addClass('highlight');

// Скрытие последнего элемента списка
u('li').last().hide();

// Изменение текста первого элемента
u('li').first().text('Начальный элемент');

Метод get()

Метод get() возвращает чистый DOM-элемент по индексу и отличается от eq():

let thirdItem = u('li').get(2); // DOM-элемент, а не объект Umbrella
thirdItem.style.color = 'red';

Особенности метода get():

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

Итоговая структура выбора элемента

Метод Возвращаемое значение Применение
eq(i) Umbrella JS объект Цепочка методов
get(i) DOM-элемент Прямое изменение DOM
[i] DOM-элемент Прямой доступ по индексу
first() Umbrella JS объект (i=0) Первый элемент коллекции
last() Umbrella JS объект (i=-1) Последний элемент коллекции

Рекомендации по использованию

  • Для манипуляций с DOM, сохраняющих цепочку вызовов, использовать eq(), first(), last().
  • Для работы с нативным DOM или передачей элементов в сторонние функции — get() или доступ через [i].
  • Комбинировать выбор элемента с методами addClass, removeClass, text, html, attr для эффективной работы с конкретными узлами.

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

Оглавление