Для передвижения по DOM структуре можно использовать разные методы в jQuery. Раньше я использовался только двумя, но со временем узнал о более мощных методах. Ими и поделюсь с вами.
Первым делом, вы должны хорошо разбираться в .parent() и .children(). Пусть у нас такая структура html (внутри level1 находятся два level2, в последнем из которых level3):
<div class="level1">
<div class="level2"></div>
<div class="level2">
<div class="level3"></div>
</div>
</div>
.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. Сегодня без них уже не обойтись. Поэтому используйте их там где это требуется.
