Дети $(this) в jQuery: как получить и не запутаться

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Как получить детей $(this) в jQuery? Разбираем на пальцах

Представьте: вы пишете интерактивную таблицу на сайте. Пользователь кликает по строке, и вам нужно подсветить именно её ячейки, не трогая соседние. Или вы делаете выпадающее меню — клик по заголовку должен показать только его подпункты. В обоих случаях встаёт вопрос: «Как получить дочерние элементы того элемента, на который я только что кликнул?»

Этот вопрос — настоящий хит на Stack Overflow. Тысячи разработчиков, от новичков до профи, ищут ответ. И неудивительно: работа с $(this) и его детьми — база, без которой не обойтись. Сегодня мы раз и навсегда разберёмся, как это делать правильно, красиво и без багов.

Почему $(this).children() — не панацея?

Самый очевидный способ — метод children(). Он возвращает только прямых потомков (первый уровень вложенности). Звучит логично, но часто новички ожидают от него магии, которой нет.

// HTML:
// <div id="parent">
//   <span>Прямой потомок</span>
//   <div>
//     <span>Вложенный потомок (не вернётся)</span>
//   </div>
// </div>

$('#parent').click(function() {
  // Вернёт только первый <span> и <div>
  let directChildren = $(this).children();
  console.log(directChildren.length); // 2
});

Важно: children() не заглядывает внутрь вложенных блоков. Если вам нужны все потомки любой глубины — используйте find().

Способ №1: Классика — $(this).children()

Когда использовать: когда вам нужны только элементы непосредственно внутри текущего блока. Например, у вас есть список <ul>, и вы хотите перебрать его <li>.

// Пример: клик по контейнеру товара
$('.product-card').on('click', function() {
  // Получаем все прямые дочерние элементы карточки
  let kids = $(this).children();
  
  // Перебираем и что-то делаем
  kids.each(function(index) {
    $(this).addClass('highlighted');
  });
});

Фишка: можно отфильтровать по селектору прямо в вызове:

// Только <div> внутри текущего элемента
let divsOnly = $(this).children('div');

Способ №2: Глубокий поиск — $(this).find()

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

// Клик по блоку новости
$('.news-block').on('click', function() {
  // Найдём все <img> внутри, даже если они в подзаголовках
  let images = $(this).find('img');
  
  images.each(function() {
    // Добавим рамку каждой картинке
    $(this).css('border', '2px solid red');
  });
});

Отличие от children(): find() обходит всё дерево DOM внутри элемента. children() — только первый уровень. Запомните правило: «Дети — это дети. Find — это все потомки до седьмого колена».

Способ №3: Нативный JavaScript — без jQuery

А что, если вы пишете на чистом JS или хотите уменьшить зависимость от библиотек? У $(this) есть «нативный» аналог — this в обработчике события. И у него тоже есть дети!

// Чистый JavaScript
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', function() {
    // Получаем прямых детей
    let children = this.children; // HTMLCollection
    
    // Превращаем в массив для удобства
    Array.from(children).forEach(child => {
      child.style.backgroundColor = 'yellow';
    });
    
    // Или ищем всех потомков по селектору
    let allSpans = this.querySelectorAll('span');
  });
});

Совет для гибридного подхода: внутри jQuery-обработчика вы можете легко получить нативный DOM-элемент через $(this)[0] или this (если используете jQuery-обработчик, this всё равно указывает на DOM-элемент).

Сравнительная таблица: что выбрать?

Метод	Что возвращает	Глубина	Фильтр по селектору	Производительность
`$(this).children()`	jQuery-объект	Только 1 уровень	Да	Высокая (быстрее find)
`$(this).find()`	jQuery-объект	Все уровни	Да	Средняя (обход всего поддерева)
`this.children`	HTMLCollection (нативный)	Только 1 уровень	Нет (только через цикл)	Очень высокая (нативный DOM)
`this.querySelectorAll()`	NodeList (нативный)	Все уровни	Да	Высокая

Типичные ошибки и как их избежать

Ошибка №1: Путаница между children() и find(). Помните: если вам нужны только прямые потомки — children(). Если все — find().
Ошибка №2: Забыли про контекст this. Внутри стрелочной функции this не будет ссылаться на элемент! Используйте function() или сохраняйте const self = this.
Ошибка №3: Ожидание, что children() вернёт текст. children() возвращает только DOM-элементы. Текстовые узлы игнорируются. Для текста используйте .contents().
Ошибка №4: Попытка вызвать children() на пустом jQuery-объекте. Всегда проверяйте, что элемент существует: if ($(this).length) { ... }.