jQuery Traversal
What is traversal?
jQuery traversal, meaning "move", is used to "find" (or select) HTML elements based on their relationship to other elements. Start with a selection and move along this selection until you reach your desired element.
The picture below shows a family tree. With jQuery traversal, you can easily move up (ancestors), down (descendants), and horizontally (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing the DOM.
## The <div> element is the parent element of <ul> and the ancestor of all content within it.
The<ul> element is the parent element of the <li> element and is a child element of <div>
The
<li> element on the left is the <span> The parent element of ;, the child element of <ul>, and the descendant of <div>.
The <span> element is a child of <li> and a descendant of both <ul> and <div>.
Two <li> elements are siblings (have the same parent element).
The <li> element on the right is the parent element of <b>, the child element of <ul>, and is the descendant of <div>.
The<b> element is a child of the <li> on the right and is a descendant of both <ul> and <div>.
Warm reminder: Ancestor is father, grandfather, great-grandfather, etc. Descendants are children, grandchildren, great-grandchildren, etc. Siblings share the same parent.
jQuery Traversal - Ancestor
Ancestor is father, grandfather or great-grandfather, etc.
With jQuery, you can traverse up the DOM tree to find the ancestors of an element.
Traverse up the DOM tree
These jQuery methods are useful for traversing up the DOM tree:
parent()parents()parentsUntil()
jQuery parent() method
parent() method returns the direct parent element of the selected element.
This method will only traverse the DOM tree one level up.
jQuery parents() method
parents() method returns the value of the selected element All ancestor elements, all the way up to the root element of the document (<html>).
The following example returns all ancestors of all <span> elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parents().css({"color":"yellow","border":"1px solid pink"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖父元素)
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
jQuery parentsUntil() method
parentsUntil () method returns all ancestor elements between two given elements.
Next Section