Previous Tutorial
21
NovjQuery DOM Traversing Methods
13 Feb 2024
Intermediate
6.91K Views
15 min read
jQuery provides the ability to find the element within the DOM using the selector and provides the ability to find the element inside the element within a DOM which means DOM traversing, nothing but finding the element based on their relationship. jQuery Provides lots if methods which are used to find the element bested within another element in DOM, consider below HTML
<div> <ul> <li></li> <li></li> </ul> <ul> </ul> </div>
The relationship structure of the above HTML is shown below
<div> is the parent element (normally called as ancestor) for both <ul>
Both <ul> are sibling, and descendant for <div>
First <ul> is the parent for both <li>
<li> is a child for first <ul>. Both <li> are siblings
To find the element <ul> which is inside <div> is very simple with jQuery DOM traversing method, we are going to see those jQuery methods one by one in this article
Read More - jQuery Interview Questions for Experienced
jQuery DOM Traversing Methods
Method
Example
Description
map()
$(selector).children(callback)
It is used for getting and setting the value from the collection of elements and produce the new jQuery object from the return value .
children()
$(selector).children()
It will return all the child element of the parent based on the selector.
parent()
$(selector).parent()
It will return a parent based on the selector expression
parents()
$(selector).parents()
It will return all higher-level parents based on the selector expression
parentsUntil()
$(selector).parentsUntil(selector,filter)
It will return a parent element until it matches with the selector and filter which is overloaded in the method.
siblings()
$(selector).siblings()
It will return a sibling based on the selector expression
prev()
$(selector).prev()
It will return an immediately preceding sibling element based on the selector expression
prevAll()
$(selector).prevAll()
It will return all previous element in order beginning with closest sibling
prevUntil()
$(selector).prevUntil(selector, filter)
It will return all preceding siblings though the iteration until it matches with the method argument.
next()
$(selector).next()
It will return an immediately next sibling element based on the selector expression
nextAll()
$(selector).nextAll()
It will return all next element in order beginning with closest sibling
nextUntil()
$(selector).nextUntil(selector, filter)
It will return all siblings though the iteration until it matches with the method argument.
eq()
$(selector).eq(index)
It will return an element from the collection of elements based on supplied index in the method. Basically, it identifies the position of element based on index in the collection and returns it.
first()
$(selector).first()
It will return the first element from the collection of elements based on selector expression
last()
$(selector).last()
It will return the last element from the collection of element based on selector expression
each()
$(selector).each(index,element)
It will iterate over the DOM elements that are part of the jQuery object
find()
$(selector).find(selector expression)
It will always look for the child element which match with the selector expression from the collection of elements.
filter()
$(selector).filter(selector expression)
It will check for an exact match, it returns both parent and child which match with the selector expression.
map()
map function is used for getting and setting the value from the collection of elements and produce the new jQuery object from the return value .
HTML<div id="parendDiv"> <p>jQuery DOM Travesal </p> <ul class="parent-ul"> First List <li class="child-list"> item 1 </li> <li class="child-list"> item 2 </li> </ul> <ul class="parent-ul"> Second List <li class="child-list-1"> item 1 </li> <li class="child-list-1"> item 2 </li> </ul> </div>JavaScript
var listItems = $(".child-list").map(function () {
return $(this).text().trim();
}).get();
console.log(listItems);
Browser
Figure 1.1
From the result in console you can observe that the map() is used to iterate the collection of element and create a jQuery object based on the return values from the call back.
children()
It will return all the child element of the parent based on the selector expression.
HTML<div id="parendDiv"> <p>jQuery DOM Travesal </p> <ul class="parent-ul"> First List <li class="child-list"> item 1 </li> <li class="child-list"> item 2 </li> </ul> <ul class="parent-ul"> Second List <li class="child-list-1"> item 1 </li> <li class="child-list-1"> item 2 </li> </ul> </div>JavaScript
$('.parent-ul').children().css('color','#FF4500');
Based on above JavaScript code the children () will return the child element from the collection of element based on the selector expression $(‘.parent-ul’) and apply the css class for it.
Browser
Figure 2.1
parent()
It will return a parent element based on the selector expression. Basically, it traverses to the immediate parent element from the collection element in the DOM tree and construct the new object based on the selector
JavaScript $('li.child-list').parent().css('color','#FF4500');
Browser
Figure 3.1
From this result in the browser you can observe the parent() is used to traverse from the child to parent. It will travel only the single level up the DOM tree.
parents()
It will return all parent element based on the selector expression. Basically, it traverses to the all parent element from the collection element in the DOM tree and construct the new object based on the selector expression.
JavaScript $('li.child-list').parents().css('color','#FF4500');
Browser
Figure 4.1
The style is applied for all the ascendant in the HTML.
Console
Figure 4.2
From the above result it is obvious the $('li.child-list').parents() return the ascendant of first set of list then the next ascendant <div> then <body> and <html> Let’s put some filter to apply the style for specific ascendant using map()
JavaScript $('li.child-list').parents().map(function () {
if ($(this).hasClass('parent-ul')) {
$(this).css('color', '#FF4500');
}
});
Browser
Figure 4.3
So, the style is applied only for the ascendant whose class name is 'parent-ul’. Note: Second set of list is also contains ‘parent-ul’ class but from the console image 4.2 it is obvious it is not in our collection from $('li.child-list').parents().
parentsUntil()
It will return a parent element until it matches with the selector and filter which is overloaded in the method. We can simple avoid using the map() with parents() by replacing it with parentsUntil()
JavaScript $('li.child-list').parentsUntil($('#parendDiv'),'.parent-ul').css('color', '#FF4500');
Browser
siblings()
It will return a new jQuery object by searching for the siblings in the DOM tree based on the selector.
JavaScript $('li.child-list').siblings().css('color', '#FF4500');
Browser
Based on the selector $('li.child-list'),
prev()
It searches for immediate predecessor of each element in DOM based on the selector and returns a new jQuery object
HTML<div id="parendDiv"> <p>jQuery DOM Travesal </p> <ul class="parent-ul"> First List <li> item 1 </li> <li class="child-list"> item 2 </li> <li> item 3 </li> </ul> <ul class="parent-ul"> Second List <li class="child-list-1"> item 1 </li> <li class="child-list-1"> item 2 </li> </ul> </div>JavaScript
$('li.child-list').prev().css('color', '#FF4500');
Browser
prevAll()
It searches for all predecessor of each element in DOM based on the selector it returns a new jQuery object
JavaScript
$('li.child-list').prevAll().css('color', '#FF4500');
Browser
prevUntil()
It searches for all predecessor of each element in DOM until it matches with selector and filter overloaded with it.
HTML<div id="parendDiv"> <p>jQuery DOM Traversal </p> <ul class="parent-ul"> First List <li> item 1 </li> <li class="child-list-imm"> item 2 </li> <li class="child-list"> item 3 </li> <li class="child-list-imm"> item 4 </li> <li> item 5 </li> </ul> <ul class="parent-ul"> Second List <li class="child-list-1"> item 1 </li> <li class="child-list-1"> item 2 </li> </ul> </div>JavaScript
$('li.child-list').prevUntil($('li.child-list'), '.child-list-imm').css('color', '#FF4500');
Browser
So based on ($('li.child-list'), '.child-list-imm') the collection is filtered from prevUntil() and the CSS is applied to it
next()
It searches for immediate sibling of each element in DOM tree based on the selector and returns a new jQuery object.
JavaScript
$('li.child-list').next($('li.child-list'), '.child-list-imm').css('color', '#FF4500');
Browser 
nextAll()
It searches for all following sibling of each element in DOM tree based on the selector and returns a new jQuery object.
JavaScript
$('li.child-list').nextAll().css('color', '#FF4500');
Browser 
nextUntil()
It searches for all next siblings of each element in DOM until it matches with selector and filter overloaded with it.
JavaScript $('li.child-list').nextUntil($('li.child-list'), '.child-list-imm').css('color', '#FF4500');
Browser
So based on ($('li.child-list'), '.child-list-imm') the collection is filtered from nextUntil() and the CSS is applied to it.
eq()
It searches for the element of each element in DOM based on selector and the index value overloaded to it.
JavaScript $('li').eq(6).css('color', '#FF4500');
The above code fetches all the <li>from the DOM and filter the element based on index passed to eq () and applies a CSS.
Browser
first()
It returns the first element from the collection of elements selected based on selector.
JavaScript $('li').first().css('color', '#FF4500');
Browser
last()
It returns the last element from the collection of elements selected based on selector.
JavaScript $('li').last().css('color', '#FF4500');
Browser
each()
It is used to iterate through the collection of elements in DOM based on the selector.
JavaScript $('li').each(function (i) {
console.log(i + 1 + "." + $(this).text().trim());
});
Browser
From the above result in console you can observe the each () is used to iterate through the collection of element
find()
The Find function will always look for the child element which match with the selector expression from the collection of elements.
HTML<div id="parendDiv"> <p>jQuery DOM Traversal </p> <ul class="parent-ul"> First List <li> item 1 </li> <li class="child-list-imm"> item 2 </li> <li class="child-list"> item 3 </li> <li class="child-list-imm"> item 4 </li> <li> <ul class="child-list"> I'm nested List </ul> item 5 </li> </ul> <ul class="parent-ul"> Second List <li class="child-list-1"> item 1 </li> <li class="child-list-1"> item 2 </li> </ul> </div>JavaScript
$('li').find('.child-list').css('color', '#FF4500');
Browser
So from the list of <li> element, the find () is used to find the child element of <li>which match with the class name ‘.child-list'’ and applies the CSS.
filter()
unlike find () the filter () function will check for an exact match. It return both parent and child which match with the selector expression.
HTML<div id="parendDiv"> <p>jQuery DOM Traversal </p> <ul class="parent-ul"> First List <li> item 1 </li> <li class="child-list-imm"> item 2 </li> <li class="child-list"> item 3 <ul class="child-list"> I'm nested List </ul> </li> <li class="child-list-imm"> item 4 </li> <li> item 5 <ul class="child-list"> I'm nested List </ul> </li> </ul> <ul class="parent-ul"> Second List <li class="child-list-1"> item 1 </li> <li class="child-list-1"> item 2 </li> </ul> </div>JavaScript
$('li').filter('.child-list').css('color', '#FF4500')Browser
Summary
We have seen the traversing method in jQuery which is used to find the elements in DOM based on its relationship, and manipulating the element by its flexibility, some of the frequently used methods are. each(), .map(), .find(), filter().
Happy Coding ??