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.
<!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 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. |