Кроме выборки и фильтрации jQuery предлагает ряд методов для обхода по объектам набора и выбора из них, тех которые нам нужны.
Для получения дочерних элементов объекта мы можем использовать метод children([селектор]):
<ul class="menu"> <li>Пункт 1</li> <li>Пункт 2 <ul class="submenu"> <li>Подпункт 2.1</li> <li>Подпункт 2.2</li> </ul> </li> <li>Пункт 3 <ul> <li>Подпункт 3.1</li> <li>Подпункт 3.2</li> </ul> </li> </ul>
Теперь получим дочерние узлы, как без селектора, так и с применением селектора:
// дочерние узлы без селектора
var lists = $('li').children('');
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
//дочерние узлы по селектору
var lists2 = $('li').children('.submenu');
lists2.each(function(index, elem){
console.log(elem.innerHTML);
});
В первом случае метод children не использует селектор, поэтому он выбирает все дочерние узла элементов li. То есть результатом будут два элемента ul:
<ul class="submenu"> <li>Подпункт 2.1</li> <li>Подпункт 2.2</li> </ul> <ul> <li>Подпункт 3.1</li> <li>Подпункт 3.2</li> </ul>
Во-втором случае в метод children передается селектор - имя класса дочернего списка, поэтому в этом случае в выборке окажется только первый список, так как только он имеет класс submenu.
Метод closest(условие) возвращает ближайшег родителя по отношению к данному элементу. Имеет следующие варианты использования:
closest(селектор[, контекст]): возвращает ближайшего родителя, соответствующего селектору. В качестве необязательного параметра может принимать контекст, в рамках которого будет проводиться поиск.
closest(элемент): возвращает ближайшего родителя, соответствующего элементу html
closest(jQuery): возвращает ближайшего родителя, соответствующего объекту jQuery
Итак, найдем ближайших родителей для узлов li:
<ul class="menu">
<li>Пункт 1</li>
<li>Пункт 2
<ul class="submenu">
<li>Подпункт 2.1</li>
<li>Подпункт 2.2</li>
</ul>
</li>
<li>Пункт 3
<ul>
<li>Подпункт 3.1</li>
<li>Подпункт 3.2</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function(){
var list = $('li').closest('ul.submenu');
list.each(function(index, elem){
console.log(elem.innerHTML);
});
});
</script>
В итоге метод closest вернет нам первый вложенный список, поскольку он имеет класс submenu.
Для получения следующего по порядку элемента, находящегося на одном уровне с текущим, используется метод next(селектор).
Этот метод может принимать необязательный селектор и возвращает элемент, находящийся после текущего.
В данном случае важно понимать, что метод next работает только с элементами одного уровня, или сиблингами (сестрами).
Сиблинги (сестры) - это элементы, котоыре имеют одного общего родителя и находятся на одном уровне. Например:
<h2 class="header">Заголовок</h2> <ul class="menu"> <li class="punkt1">Пункт 1</li> <li class="punkt2">Пункт 2 <ul class="submenu"> <li>Подпункт 2.1</li> <li>Подпункт 2.2</li> </ul> </li> <li class="punkt3">Пункт 3</li> </ul>
В данном случае сиблингами будут являться заголовок h2 и весь следующий список с классом menu. Если мы посмотрим вглубь списка, то здесь сиблингами
будут элементы списка с классами punkt1, punkt2, punkt3. При этом, поскольку эти элементы находятся с заголовкм h2 на разных уровнях,
то оп отношению к заголовоку они не будут сиблингами.
Итак, применим метод next, получив следующий элемент после первого элемента списка:
var lists = $('li.punkt1').next();
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
В данном случае метод next вернет нам элемент <li class="punkt2">, поскольку он идет следующим за элементом li
с классом punkt1, который мы получаем в выражении $('li.punkt1').
Мы можем также получить все следующие элементы одного уровня по отношению к текущему, использовав метод nextAll([селектор]).
Этот метод также может принимать в качестве необязательного параметра селектор, сужающий выборку:
// без селектора
var lists = $('li.punkt1').nextAll();
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
// c селектором
var lists1 = $('li.punkt1').nextAll('.punkt3');
lists1.each(function(index, elem){
console.log(elem.innerHTML);
});
В первом случае в выборке окажутся все элементы одного уровня, которые находятся после элемента li с классом punkt1. Во втором же
случае в выборке будут только те следующие элементы, класс которых - punkt3.
Кроме того, плучить следующие элементы одного уровня с текущим можно с помощью метода nextUntil([селектор]). Если мы используем
данный метод без селектора, то его действие аналогично методу nextAll.
Если же мы применяем селектор, то тогда поиск следующих элементов будет производиться до того элемента, который соответствует селектору. Например:
var lists = $('li.punkt1').nextUntil('li.punkt3');
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
В данном случае мы ищем все элементы списка до того элемента, класс которого равен punkt3.
На группу методов next/nextAll/nextUntill похожа группа методов prev/prevAll/prevUntil. Метод prev имеет похожее действие на элементы одного уровня, только получает предыдущие элементы по отношению к текущему. Возьмем для примера использованную разметку списком и применим метод prev:
var lists = $('li.punkt3').prev();
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
Метод prev также может принимать в качестве параметра селектор, сужающий диапазон элементов выборки.
Подобно методу nextAll можн использовать метод prevAll([селектор]):
// без селектора
var lists = $('li.punkt3').prevAll();
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
// c селектором
var lists1 = $('li.punkt3').prevAll('.punkt1');
lists1.each(function(index, elem){
console.log(elem.innerHTML);
});
Аналогично использованию метода nextUntil применение метода prevUntil([селектор]):
var lists = $('li.punkt3').prevUntil('li.punkt1');
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
Метод siblings([селектор]) представляет собой комбинацию методов nextAll и prevAll и позволяет получить всех сиблингов текущего
элемента.
var lists = $('.punkt2').siblings();
В этом случае переменная lists будет содержать набор из предыдущего элемента punkt1 и следующего элемента punkt3.
Метод parent([селектор]) возвращает непосредственных родителей для данного элемента. Например, возьмем предыдущую разметку со списками:
<body> <ul class="menu"> <li class="punkt1">Пункт 1</li> <li class="punkt2">Пункт 2 <ul class="submenu"> <li>Подпункт 2.1</li> <li>Подпункт 2.2</li> </ul> </li> <li class="punkt3">Пункт 3</li> </ul> </body>
В даном случае для списка menu непосредственным родителем будет элемент body. А для элементов li непосредственным родителем будет
элемент ul:
var lists = $('.menu').parent();
Используя селектор, мы можем кнкретизировать родителя на соответствие данному селектору.
Похожим действием обладает метод parents([селектор]). Только он возвращает не только непосредственных родителей, но и вообще всех родителей
вплоть до элемента самого верхнего уровня - то есть элемента html. Например, получим всех родителей для первого элемента списка:
$('.punkt1').parents();
Это выражение вернет нам следующую цепочку родителей: ul->body->html
Мы можем ограничить возвращаемый набор родителей, использовав селектор или применив еще один метод - метод parentsUntil([селектор]).
Этот метод ограничивает восхождение по дереву родителей элементом, соответствующим селетору. Например, мы не хотим, чтобы родители выходили за пределы элемента body:
$('.punkt1').parentsUntil('body');