Traversing through JQuery elements means to move through the elements or to find elements with relation to other elements. There are various methods that we use in JQuery to traverse through elements.
<div>
<ul>
<li>
<p/>
</li>
<li>
<p/>
</li>
</ul>
<div>
Here, I’ll explain the traversing of elements using the above example.
The <div> element is the parent of <ul> element and the ancestor of everything inside it.
The <ul> element is the parent element of <li> and also the child element of <div>.
The <li> elements are child elements of <ul>, and the <p> elements are the child of the corresponding <li> element.
The <li> elements are siblings to each other.
JQuery provides various methods to traverse through DOM elements.
The methods used to traverse up the DOM elements are:
1)parent()
2)parents()
3)parentsUntil()
Let’s discuss the above mentioned methods in detail.
1)parent()
Using the parent() method, we can traverse the parent element of the selector element. The parent() method returns the closest parent element of the selector.
Syntax: $(‘selector’).parent();
To select a specific parent, we can pass a selector in the method.
Syntax: $(‘selector_1’).parent(‘selector_2’);
2)parents()
Using the parents() method, we can access all the parent elements of the selector element. The difference between the parent() and parents() methods is that the parent() method returns only the closest parent, and parents() method returns all the parent elements of the selector element.
Syntax: $(‘selector’).parents();
To select specific parents, we can pass a selector with the method.
Syntax: $(‘selector_1’).parents(‘selector_2’);
3)parentsUntil()
Using parentsUntil() method, we can access the parents up to the selector passed with the parentsUntil() method. In case we want to access elements between a child and an ancestor, we can use this method.
Syntax: $(‘selector_1’).parentsUntil(‘selector_2’);
The elements between selector_1 and selector_2 will be returned.
The methods used to traverse down the DOM elements are:
1)children()
2)find()
Let us discuss them in detail.
1)children()
As the name suggests, the children() method is used to traverse the immediate child of the selector element. Using the children() method, we can access only the immediate child and not all the children of the selector element.
Syntax: $(‘selector’).children();
To find specific children, we can pass a selector with the method.
Syntax: $(‘selector_1’).children(‘selector_2’);
2)find()
The find() method is used to find all the descendants of the selector element. Using the find() method, we can return all the descendants or specify them by passing them with the method.
Syntax: $(‘selector_1’).find(‘selector_2’);
All the descendants of selector_1 that matches the selector selector_2 will be selected.
To select all the descendants of the selector, we pass ‘*’ with the find method.
Syntax: $(‘selector’).find(‘*’);
We already talked about traversing up and down the dom elements. Next, we are going to discuss about traversing sideways the DOM elements. The methods used for that purpose are:
1)siblings()
2)next()
3)nextAll()
4)nextUntil()
5)prev()
6)prevAll()
7)prevUntil()
Let’s discuss each of them in detail and learn more about them.
1)siblings()
The siblings() method returns all the siblings of the selector. To select specific siblings, we can pass a selector with the method.
Syntax: $(‘selector’).siblings();
The above syntax returns all the siblings of the selector.
Syntax: $(‘selector_1’).siblings(‘’selector_2’);
The above syntax returns only the specified siblings (‘selector_2’) of the selector.
2)next()
The next() method returns the immediate next sibling of the selector element.
Syntax: $(‘selector’).next();
3)nextAll()
The nextAll() method returns all the next siblings of the selector element. To return only specific elements, we can pass a selector with the method, and only the elements which match the selector will be returned.
Syntax: $(‘selector_1’).nextAll(‘selector_2’);
4)nextUntil()
The nextUntil() method returns all the next siblings from the selector element up to the selector passed with the method.
Syntax: $(‘selector_1’).nextUntil(‘selector_2’);
5)prev()
The prev() method returns the immediate previous sibling of the selector element.
Syntax: $(‘selector’).prev();
6)prevAll()
The prevAll() method returns all the previous siblings of the selector element. To return only specific elements, we can pass a selector with the method, and only the elements that match the selector will be returned.
Syntax: $(‘selector_1’).prevAll(‘selector_2’);
7)prevUntil()
The prevUntil() method returns all the previous siblings from the selector element up to the selector passed with the method.
Syntax: $(‘selector_1’).prevUntil(‘selector_2’);
Next is the filtering methods used to filter the DOM elements. The method used are:
1)first()
2)last()
3)eq()
4)filter()
5)not()
Now, let’s talk about filtering in detail.
1)first()
The first() method is used to return the first element that matches the selector.
Syntax: $(‘selector’).first();
2)last()
The last() method is used to return the last element that matches the selector.
Syntax: $(‘selector’).last();
3)eq()
The eq() method returns the selector element that matches the index passed with the method.
Syntax: $(‘selector’).eq(index);
The index passed will be an integer that specifies the index of the selector element.
4)filter()
The filter() method is used to filter out specific elements using a selector.
Syntax: $(‘selector_1’).filter(‘selector_2’);
The filter() method filters the elements that match selector_2 from the elements that match selector_1.
5)not()
The not() method acts as the opposite of the filter() method. It returns the elements that do not match the selector passed with the method.
Syntax: $(‘selector_1’).not(‘selector_2’);
The not() method returns the elements that do not match selector_2 from the elements that match selector_1.
That’s it about the traversing methods used in DOM. Hope this blog made you understand how to traverse through DOM elements.