In addition to fetching and filtering, jQuery provides a number of methods for iterating over the objects in a set and selecting the ones we want from them.
Getting child elements and the children method
To get the child elements of an object, we can use the method children([selector]):
<ul class="menu">
<li>Item 1</li>
<li>Item 2
<ul class="submenu">
<li>Subclause 2.1</li>
<li>Subclause 2.2</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Subclause 3.1</li>
<li>Subclause 3.2</li>
</ul>
</li>
</ul>
Now we get the child nodes, both without the selector and with the use of the selector:
// child nodes without selector
var lists = $('li').children('');
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
// child nodes by selector
var lists2 = $('li').children('.submenu');
lists2.each(function(index, elem){
console.log(elem.innerHTML);
});
In the first case, the method children do not use a selector, so it selects all children of the element node li. That is, the result will be two ul elements:
<ul class="submenu">
<li>Subclause 2.1</li>
<li>Subclause 2.2</li>
</ul>
<ul>
<li>Subclause 3.1</li>
<li>Subclause 3.2</li>
</ul>
In the second case, a selector is passed to the children method – the class name of the child list, so in this case, only the first list will be in the selection, since only it has the submenu class.
The closest method
The method closest(condition) returns the closest parent to the given element. Has the following use cases:
- closest(selector[, context]): returns the closest parent that matches the selector. As an optional parameter, it can take the context within which the search will be performed.
- closest(element): returns the closest parent corresponding to the HTML element
- closest(jQuery): returns the closest parent that matches the jQuery object
So, let’s find the nearest parents for li nodes:
<ul class="menu">
<li>Item 1</li>
<li>Item 2
<ul class="submenu">
<li>Subclause 2.1</li>
<li>Subclause 2.2</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Subclause 3.1</li>
<li>Subclause 3.2</li>
</ul>
</li>
</ul>
As a result, the closest method will return the first nested list to us, since it has a submenu class.
The next method and subsequent elements
To get the next element in order, which is on the same level as the current one, use the next(selector). This method can take an optional selector and returns the element after the current one.
In this case, it is important to understand that the method next only works with elements of the same level, or siblings (sisters). Siblings (sisters) are elements that have one common parent and are on the same level. For example:
<h2 class="header">Header</h2>
<ul class="menu">
<li class="punkt1">Point 1</li>
<li class="punkt2">Item 2
<ul class="submenu">
<li>Subclause 2.1</li>
<li>Subclause 2.2</li>
</ul>
</li>
<li class="punkt3">Item 3</li>
</ul>
In this case, the siblings will be the h2 heading and the entire following list with the menu class. If we look deep into the list, then here the siblings will be the elements of the list with the classes punkt1, punkt2, punkt3. At the same time, since these elements are h2at different levels with the heading, they will not be siblings in relation to the heading.
So, we apply the next method, getting the next element after the first element of the list:
var lists = $('li.punkt1').next();
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
In this case, the next method will return the <li class=”punkt2″></li>, since it comes after li the punkt1 element that we get in the $(‘li.punkt1’) expression.
We can also get all next siblings of the current one using the nextAll([selector]). This method can also take as an optional parameter a selector that narrows the selection:
// no selector
var lists = $('li.punkt1').nextAll();
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
// with selector
var lists1 = $('li.punkt1').nextAll('.punkt3');
lists1.each(function(index, elem){
console.log(elem.innerHTML);
});
In the first case, the selection will include all elements of the same level that are located after the element li with the punkt1 class. In the second case, the selection will contain only those following elements whose class is punkt3.
In addition, you can get the next elements of the same level as the current one using the nextUntil([selector]). If we use this method without a selector, then its action is similar to the nextAll.
If we use a selector, then the search for the next elements will be made before the element that matches the selector. For example:
var lists = $('li.punkt1').nextUntil('li.punkt3');
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
In this case, we are looking for all the elements of the list up to the element whose class is punkt3.
prev method and previous elements
The group of methods prev/prevAll/prevUntil is similar to the group of methods next/nextAll/nextUntill. The prev method has a similar effect to sibling elements, only it gets the previous elements in relation to the current one. Let’s take the list markup used as an example and apply the prev method:
var lists = $('li.punkt3').prev();
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
The prev method can also take as a parameter a selector that narrows down the range of elements in the selection.
Like the nextAll method, you can use the prevAll([selector]) method :
// no selector
var lists = $('li.punkt3').prevAll();
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
// with selector
var lists1 = $('li.punkt3').prevAll('.punkt1');
lists1.each(function(index, elem){
console.log(elem.innerHTML);
});
Similar to using the nextUntil method, using the prevUntil([selector]) method :
var lists = $('li.punkt3').prevUntil('li.punkt1');
lists.each(function(index, elem){
console.log(elem.innerHTML);
});
Getting all elements of the same level (siblings)
The method siblings([selector])is a combination of the nextAll and prevAll methods and allows you to get all siblings of the current element.
var lists = $('.punkt2').siblings();
In this case, the lists variable will contain a set of the previous punkt1 element and the next punkt3 element.
parent/parents methods and getting parents
The method parent([selector])returns the immediate parents for the given element. For example, take the previous markup with lists:
<body>
<ul class="menu">
<li class="punkt1">Point 1</li>
<li class="punkt2">Item 2
<ul class="submenu">
<li>Subclause 2.1</li>
<li>Subclause 2.2</li>
</ul>
</li>
<li class="punkt3">Item 3</li>
</ul>
</body>
In this case, the immediate parent of the menu list would be the body element. And for li elements, the immediate parent is the ul:
var lists = $('.menu').parent();
Using a selector, we can specify the parent to match the given selector.
The method has a similar effect parent ([selector]). Only it returns not only the immediate parents but also all parents in general, up to the top-level element – that is, the element HTML. For example, let’s get all the parents for the first element of the list:
$('.punkt1').parents();
This expression will return us the following chain of parents: ul-> body->html
We can limit the returned set of parents by using a selector or by using another method, the parentsUntil([selector]).
This method restricts climbing the parent tree to the element that matches the selector. For example, we don’t want the parents to extend beyond the body element:
$('.punkt1').parentsUntil('body');