jQuery найти предка и потомка в DOM структуре: .closest(), .find(), .parent(), .children()

Для передвижения по DOM структуре можно использовать разные методы в jQuery. Раньше я использовался только двумя, но со временем узнал о более мощных методах. Ими и поделюсь с вами.

Первым делом, вы должны хорошо разбираться в .parent() и .children(). Пусть у нас такая структура html (внутри level1 находятся два level2, в последнем из которых level3):

.parent() – позволяет искать элементы на уровень выше от текущего. Чтобы понять как это работает найдем родительский элемент для level3:

alert( $(“.level3”).parent().attr(‘class’) );
– здесь сработает всплывайка, которая выведет level2, так как level3 находится внутри него. Таким образом, чтобы добраться до level1 можно писать так (но лучше этого не делать – есть более продвинутый метод для той цели):

alert( $(“.level3”).parent().parent().attr(‘class’) );

.children() – ищет потомков от текущей позиции элемента. Т.е. принцип как у .parent(), только внутрь структуры:

alert( $(“.level1”).children().attr(‘class’) ); // выведет первого встретившегося потомка level2, а второго проигнорирует

Теперь о более продвинутых методах поиска.

.closest() – ищет ближайшего родителя указанного в поиске.

alert( $(“.level3”).closest(‘.level1’).attr(‘class’) ); // выведет level1 минуя level2 и любую структуру, которая могла быть. Т.е. за счет .closest() мы можем найти заданного ближайшего родителя миную большие вложенности DOM элементов.

.find() – осуществляет поиск дочерних элементов внутри уже выбранных элементов.

alert( $(“.level1”).find(‘.level3’).attr(‘class’) ); // также как и .closest() будет проходить по всем потомкам, пока не найдет первый попавшийся level3.

Использование .closest() и .find() в свое время сильно усилило мои знания в jQuery. Сегодня без них уже не обойтись. Поэтому используйте их там где это требуется.