Как в jQuery выбрать ближайший подходящий потомок элемента?

Задан 26 месяцев назад213 просмотров2 ответа

Есть блок, внутри него вложенность. Мне нужно из родителя достать определённого потомка, но не любого вложенного, а конкретного. Путаюсь между find() и children(). В чём разница и что когда использовать?

Диана Герасимова 🐣 Птенец

спросил 26 месяцев назад

2 ответа

✓ Принятый ответ — помог автору

Главная разница в глубине поиска:

.children(selector) — ищет только прямых потомков (на один уровень вниз).
.find(selector) — ищет по всем уровням вложенности.

Пример:

<div class="card">
  <div class="body">
    <span class="price">100 ₽</span>
  </div>
  <span class="price">в углу</span>
</div>

const $card = $('.card');

// только прямой потомок — найдёт span "в углу"
$card.children('.price');        // 1 элемент

// любой вложенный — найдёт оба .price
$card.find('.price');            // 2 элемента

Если нужен именно ближайший подходящий потомок, обычно берут .find('.price').first() либо .children(), когда точно знаешь, что элемент лежит на первом уровне.

А для движения вверх по дереву есть зеркальный метод .closest(selector) — он ищет ближайшего предка.

Дарья Морозова 🐣 Птенец

26 месяцев назад

Маленькая шпаргалка по навигации в jQuery:

$el.children()  // прямые дети
$el.find()      // потомки на любой глубине
$el.parent()    // прямой родитель
$el.closest()   // ближайший предок по селектору
$el.siblings()  // соседи
$el.next()      // следующий сосед

Запомнить просто: children/parent — один шаг, find/closest — поиск через всё дерево.

Максим Николаев 🐣 Птенец

26 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.