Получение дочерних элементов с помощью селектора $(this) в jQuery

Одной из общих задач программирования на языке JavaScript с использованием библиотеки jQuery является выборка дочерних элементов определенного элемента. Примером может служить следующая структура HTML:

<div id="parent">
    <img src="image.jpg">
</div>

В этом случае необходимо обращаться к изображению, которое является дочерним элементом для div с идентификатором parent.

Селектор $(this) в jQuery используется для ссылки на текущий элемент. Если был добавлен обработчик событий к определенному элементу, $(this) будет ссылаться на этот элемент внутри функции обработчика.

Для выбора дочерних элементов с использованием селектора $(this), можно использовать метод .children(). Этот метод возвращает все дочерние элементы выбранного элемента.

$("#parent").click(function() {
    $(this).children('img');
});

В этом коде обработчик событий click добавлен к элементу div с идентификатором parent. Когда пользователь кликает по этому элементу, вызывается функция обработчика. Внутри этой функции, $(this).children('img') выбирает все дочерние изображения элемента, по которому был сделан клик.

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

$("#parent").click(function() {
    $(this).find('img');
});

В этом примере $(this).find('img') вернет все изображения внутри элемента div, независимо от того, насколько глубоко они находятся в структуре DOM.