jQuery | Traversing Ancestors
It is used to find ancestors of an element in the DOM tree.
There are different Methods for traversing up the DOM tree :
- parent(): It is used to return the direct parent element of the given selected element.
- parents(): It is used to return all ancestor elements of the given selected element upto root element.
- parentsUntil(): It is used to return all the ancestor elements between two given arguments.
Syntax:
$(document).ready(function(){
$("span").parent().css({"color": " ", "border": " "});
});Example-1: Showing parent() method.
<!DOCTYPE html><html> <head> <style> .ancestors * { display: block; border: 2px solid lightgreen; color: green; padding: 10px; margin: 5px; } </style> <script src= </script> <script> $(document).ready(function() { $("span").parent().css({ "color": "green", "border": "4px solid black" }); }); </script></head> <body class="ancestors">great-great-grandparent <div style="width:500px;">great-grandparent <ul>grandparent <ul>direct parent <span> <h1> <li> <center> GeeksforGeeks </center> </li> </h1> </span> </ul> </ul> </div></body> </html> |
Output:
Example-2: Showing parents() method.
<!DOCTYPE html><html> <head> <style> .ancestors * { display: block; border: 2px solid lightgreen; color: green; padding: 10px; margin: 5px; } </style> <script src= </script> <script> $(document).ready(function() { $("span").parents().css({ "color": "green", "border": "4px solid black" }); }); </script></head> <body class="ancestors">great-great-grandparent <div style="width:500px;">great-grandparent <ul>grandparent <ul>direct parent <li> <span> <h1> <center> GeeksforGeeks </center> </h1> </span> </li> </ul> </ul> </div></body> </html> |
Output:
Example-3: Showing parentsUntil() method.
<!DOCTYPE html><html> <head> <style> .ancestors * { display: block; border: 2px solid lightgreen; color: green; padding: 10px; margin: 5px; } </style> <script src= </script> <script> $(document).ready(function() { $("span").parentsUntil().css({ "color": "green", "border": "4px solid black" }); }); </script></head> <body class="ancestors">great-great-grandparent <div style="width:500px;">great-grandparent <ul>grandparent <ul>direct parent <li> <span> <h1> <center> GeeksforGeeks </center> </h1> </span> </li> </ul> </ul> </div></body> </html> |
Output:
