Как получить дочерние элементы текущего элемента $(this) в jQuery?

Использование методов .children() и .find() для доступа к дочерним элементам

Вы почти всё сделали правильно! Метод .children() действительно возвращает объект jQuery, содержащий все прямые дочерние элементы текущего элемента. Проблема в том, что вы не используете его результат для дальнейших действий. Давайте разберёмся на примере.

Предположим, у нас есть такой HTML:

<ul id="task-list">
  <li class="task">
    <span class="task-text">Купить молоко</span>
    <button class="delete-btn">Удалить</button>
    <input type="checkbox" class="done-checkbox">
  </li>
  <li class="task">
    <span class="task-text">Позвонить врачу</span>
    <button class="delete-btn">Удалить</button>
    <input type="checkbox" class="done-checkbox">
  </li>
</ul>

Теперь правильный способ получить и использовать дочерние элементы:

$('.task').on('click', function() {
  // Получаем все прямые дочерние элементы
  var children = $(this).children();
  
  // Можно работать с каждым дочерним элементом
  children.each(function() {
    console.log($(this).text()); // Выведет текст каждого дочернего элемента
  });
  
  // Или обратиться к конкретному дочернему элементу по индексу
  var firstChild = $(this).children().eq(0); // Первый дочерний элемент (span)
  var secondChild = $(this).children().eq(1); // Второй (кнопка)
  
  // Чаще всего нужно найти элемент по классу или тегу
  $(this).children('.delete-btn').hide(); // Скрыть кнопку удаления
  $(this).children('.task-text').css('color', 'red'); // Изменить цвет текста
});

Разница между .children() и .find()

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

Пример с find():

// Если внутри li есть вложенный div с параграфами
$(this).find('p'); // Найдёт все параграфы на любом уровне вложенности
$(this).find('.some-class'); // Найдёт все элементы с классом some-class

Практический пример: отметка задачи как выполненной

$('.task').on('click', function() {
  var $task = $(this);
  var $checkbox = $task.children('.done-checkbox');
  var $text = $task.children('.task-text');
  
  // Переключаем состояние чекбокса
  $checkbox.prop('checked', !$checkbox.prop('checked'));
  
  // Если чекбокс отмечен, зачёркиваем текст
  if ($checkbox.prop('checked')) {
    $text.css('text-decoration', 'line-through');
  } else {
    $text.css('text-decoration', 'none');
  }
});

Важно: если вы используете .children() без аргументов, вы получите все дочерние узлы (включая текстовые). Чтобы отфильтровать только элементы, передайте селектор. И не забывайте, что $(this).children() возвращает объект jQuery, с которым можно работать как с обычной коллекцией: применять методы, перебирать через .each() и т.д.

$('#task-list').on('click', '.delete-btn', function() {
  // $(this) здесь — это сама кнопка, а не li
  var $task = $(this).closest('.task'); // Находим родительский элемент
  $task.fadeOut(); // Удаляем задачу с анимацией
});

$('#task-list').on('change', '.done-checkbox', function() {
  var $task = $(this).closest('.task');
  var $text = $task.find('.task-text');
  
  if ($(this).is(':checked')) {
    $text.css('text-decoration', 'line-through');
  } else {
    $text.css('text-decoration', 'none');
  }
});