Метод .find() для вложенного поиска

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

Синтаксис

u(elements).find(selector)
  • elements — исходные элементы, выбранные с помощью u() или переданные в конструктор Umbrella.
  • selector — CSS-селектор, по которому производится поиск внутри каждого исходного элемента.
  • Возвращаемое значение — объект Umbrella JS, содержащий все найденные элементы, соответствующие селектору внутри исходного набора.

Основные особенности

  1. Локальный поиск: .find() ищет элементы только внутри выбранного набора, а не по всему документу.
  2. Поддержка цепочек: возвращаемый объект Umbrella позволяет продолжать дальнейшие манипуляции методами библиотеки.
  3. Множественные контейнеры: если исходный набор содержит несколько элементов, поиск производится в каждом из них, и результат объединяется.

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

Поиск по классу внутри конкретного контейнера
// Получаем все элементы с классом .card внутри .container
let cards = u('.container').find('.card');

// Добавляем класс active найденным карточкам
cards.addClass('active');

В этом примере .find() ограничивает поиск карточек .card только контейнерами .container, игнорируя другие части DOM.

Комбинированный поиск внутри нескольких контейнеров
// Выбираем несколько контейнеров
let sections = u('.section');

// Ищем все заголовки внутри этих секций
let headers = sections.find('h2');

// Изменяем текст найденных заголовков
headers.text('Обновлённый заголовок');

Если .section содержит несколько элементов, .find() возвращает все заголовки h2 во всех секциях сразу.

Вложенные вызовы .find()

Метод поддерживает цепочки вызовов для более глубокого поиска:

// Находим элементы внутри контейнера, затем внутри этих элементов ищем ссылки
u('.container')
  .find('.card')
  .find('a')
  .addClass('highlight');

Здесь поиск идёт пошагово: сначала .card внутри .container, затем ссылки a внутри найденных карточек. Результат — все ссылки внутри карточек, подсвеченные классом highlight.

Особенности работы с псевдоклассами и атрибутами

.find() поддерживает стандартные CSS-селекторы, включая псевдоклассы и атрибуты:

// Найти все видимые ссылки внутри карточек
u('.card').find('a:visible');

// Найти все инпуты с атрибутом data-required внутри формы
u('form').find('input[data-required]');

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

Производительность и рекомендации

  • Локальный поиск всегда быстрее глобального: поиск внутри конкретного контейнера сокращает количество проверяемых элементов DOM.
  • Использование цепочек .find() вместо глобальных селекторов повышает читаемость и поддержку кода.
  • Объединение результатов: .find() автоматически объединяет элементы из всех исходных контейнеров, поэтому нет необходимости писать дополнительные циклы для объединения.

Методы для дальнейшей работы с результатом .find()

После поиска возвращается объект Umbrella, что позволяет сразу применять методы для манипуляции:

  • .addClass(), .removeClass(), .toggleClass() — управление классами.
  • .attr(), .removeAttr() — работа с атрибутами.
  • .text(), .html() — изменение или получение содержимого.
  • .each() — выполнение функции для каждого найденного элемента.

Пример комплексного применения:

u('.menu')
  .find('li.active')
  .each(function(el) {
    u(el).removeClass('active');
  });

В этом примере .find() выбирает все активные пункты меню, а .each() позволяет поочередно удалить у них класс active.

Отличие .find() от .children()

  • .children(selector) возвращает только непосредственных потомков выбранных элементов.
  • .find(selector) ищет вложенные элементы на любом уровне.
u('.list').children('li'); // только прямые li
u('.list').find('li');     // все li внутри, включая вложенные

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

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

Оглавление