Open In App

jQuery Traversing Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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>
  
    <!-- 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 Complete List:

Methods

Description

Example

add() Add elements to the existing group of elements.
Try

addBack() Adds the previous set of elements to the current set.
Try

children() Find all the children’s elements related to that selected element. 
Try

closest() Returns the first ancestor of the selected element in the DOM tree
Try

contents() Returns all the direct children, including text and comment nodes for the selected element.
Try

each() Specify the function to run for each matched element.
Try

eq() Locate the selected elements directly and returns an element with a specific index. 
Try

filter() Filter out all the elements that do not match the selected criteria and those matches will be returned.
Try

find() Find all the descendant elements of the selected element. 
Try

first() Select the first element from the specified elements. 
Try

has() Find all the elements inside the specified list of elements.
Try

is() Check if one of the selected elements matches the selector element.
Try

last() Find the last element of the specified elements.
Try

map() Translate all items in an array or object to a new array of items.
Try

next() Return the next sibling of the selected element.
Try

nextAll() Return all the next sibling elements of the selected element.
Try

nextUntil() Find all sibling elements between two given elements.
Try

not() Return all the element which is not matched with the selected element with the particular “id” or “class”.
Try

offsetParent() Find the first positioned parent element in the DOM tree.
Try

parent() Find the parent element related to the selected element.
Try

parents() Find all the parent elements related to the selected element.
Try

parentsUntil() Find all the ancestor elements between two given elements in a DOM tree.
Try

prev()  Return the previous sibling element of the selected element. 
Try

prevAll() Return all the previous sibling elements of the selected element.
Try

prevUntil() Find all the previous sibling elements between two given elements. 
Try

siblings() The siblings are those having the same parent element in DOM Tree. 
Try

slice() Select a subset of elements based on its index.
Try

 



Last Updated : 04 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads