You can traverse through the elements in the order they are combined. All the elements are mostly combined in the form of a tree, and we can traverse them starting from the root.
Let's take a look at the following image:
Let's take a look at the following description:
- The
<div>element is the parent of<ul>and an ancestor of everything inside it - The
<ul>element is the parent of both the<li>elements and a child of<div> - The left
<li>element is the parent of<span>, child of<ul>, and a descendant of<div> - The
<span>element is a child of the left<li>and a descendant of<ul>and<div> - The two
<li>elements are siblings (they share the same parent) - The right
<li>element is the parent of<b>, child of<ul>, and a descendant of<div> - The
<b>element is a child of the right<li>and a descendant of<ul>and<div>
We will cover three useful jQuery methods for traversing up the DOM tree in the following sections.
$(selector).parentsUntil(stop,filter);
The parentsUntil() method returns all ancestors between the selector and stop element.
An ancestor element is a parent, grandparent, great-grandparent, and so on.
Stop an optional parameter that indicates where to stop the search for matching ancestor elements. Filter an optional parameter usually an expression to narrow down the search between selector and stop.
A child of the parent is called its descendant.
In the following sections, we will cover two useful jQuery methods for traversing down the DOM tree.
Siblings are elements that share a same parent.
There are many useful jQuery methods for traversing sideways in the DOM tree, which we cover here.
$(selector).siblings(filter);
The
siblings() function returns all the siblings of the selected element.
Filter is an optional parameter usually an expression to narrow down the search among all siblings.
$(selector).next(filter);
Filter is an optional parameter usually an expression to narrow down the search for next sibling.
$(selector).nextAll(filter);
The nextAll() function returns an array of the next siblings of the selected element.
$(selector).nextUntil(stop, filter);
The
nextUntil() function returns an array of next siblings of the selected element between two specified elements.
Stop an optional parameter that indicates where to stop the search for next matching sibling elements.
Filter an optional parameter usually an expression to narrow down the search for sibling elements between selector and stop.
$(selector).prev(filter);
The
prev() function returns the previous siblings of the selected element.
$(selector).prevAll(filter);
The
prevAll() function returns an array of the previous siblings of the selected element.
Filter is an optional parameter usually an expression to narrow down the search for all previous siblings.
The filtering method is used to locate a specific element based on its location.
The first() function outputs the first element of the selected elements.
This returns a jQuery object that stores a reference to the first item from an array of items matching the provided selector string.
This function returns the last element of the selected elements.
This returns a jQuery object that stores a reference to the last item from an array of items matching the provided selector string.
The eq() function returns the element specified at the corresponding index number, provided that we begin the numbering from 0. Hence, the first element will have its index number as 0, the second element will have the index number 1, and so on.
The filter() function is used to obtain a list of elements that satisfy a particular condition. All the elements that satisfy the specified condition will be returned.
The element to be searched and the condition that the element must satisfy are taken as parameters here.
The filter() function is useful for searching and obtaining a list of elements that satisfy a specified condition. In the following example, we will search and obtain a list of all the <div> elements that have their class named as Feedback:
$(document).ready(function() {
$("div").filter(".Feedback");
});