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: