jQuery Traversing Complete Reference

Last Updated : 18 Apr, 2025

In jQuery, traversing means moving through or over the HTML elements to find, filter, or select a particular or entire element.

Syntax:

$(selector).method()

Example: This example illustrates the offsetParent() method in jQuery.

HTML

<!DOCTYPE html> <html> <head>     <title>The offsetParent Method</title>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>      <!-- jQuery code to show the working of this method -->     <script>         $(document).ready(function(){             $("button").click(function(){                 $("p").offsetParent().css("background-color", "green");             });         });     </script>     <style>         #d1 {             border:1px solid black;             width:70%;             position:absolute;             left:10px;             top:50px         }         #d2 {             border:1px solid black;             margin:50px;             background-color:lightblue;             text-align:center;         }         p {             padding-left: 80px;             font-weight: bold;         }     </style> </head> <body>     <button>Submit</button>     <div id="d1">         <div id="d2">             <!-- click on this paragraph -->              <p>Welcome to GeeksforGeeks!</p>          </div>     </div> </body> </html>

Output:

jQuery Traversing

jQuery Traversing Complete List:

Methods	Description	Example
add()	Add elements to the existing group of elements.
addBack()	Adds the previous set of elements to the current set.
children()	Find all the children’s elements related to that selected element.
closest()	Returns the first ancestor of the selected element in the DOM tree
contents()	Returns all the direct children, including text and comment nodes for the selected element.
each()	Specify the function to run for each matched element.
eq()	Locate the selected elements directly and returns an element with a specific index.
filter()	Filter out all the elements that do not match the selected criteria and those matches will be returned.
find()	Find all the descendant elements of the selected element.
first()	Select the first element from the specified elements.
has()	Find all the elements inside the specified list of elements.
is()	Check if one of the selected elements matches the selector element.
last()	Find the last element of the specified elements.
map()	Translate all items in an array or object to a new array of items.
next()	Return the next sibling of the selected element.
nextAll()	Return all the next sibling elements of the selected element.
nextUntil()	Find all sibling elements between two given elements.
not()	Return all the element which is not matched with the selected element with the particular “id” or “class”.
offsetParent()	Find the first positioned parent element in the DOM tree.
parent()	Find the parent element related to the selected element.
parents()	Find all the parent elements related to the selected element.
parentsUntil()	Find all the ancestor elements between two given elements in a DOM tree.
prev()	Return the previous sibling element of the selected element.
prevAll()	Return all the previous sibling elements of the selected element.
prevUntil()	Find all the previous sibling elements between two given elements.
siblings()	The siblings are those having the same parent element in DOM Tree.
slice()	Select a subset of elements based on its index.

jQuery HTML/CSS Methods Complete Reference

Vishal_Khoda

Improve

Article Tags :

jQuery Traversing Complete Reference

Similar Reads

jQuery Selectors

jQuery Events

jQuery Effects

jQuery HTML/CSS

jQuery Traversing