Traversing Up the DOM Tree
jQuery provides several methods to move upward through the DOM tree, from a
selected element to its ancestors. The most commonly used methods are:
- parent() – Selects the immediate parent element.
- parents() – Selects all ancestor elements up the DOM tree.
- parentsUntil() – Selects all ancestor elements up to, but not including, a specified element.
jQuery parent() Method
The parent() method is used to get the direct parent of the selected
element. It moves only one level up in the DOM hierarchy.
Example
The following code selects the immediate parent of each <span>
element on the page:
<!DOCTYPE html>
<html>
<head>
<title>jQuery parent() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="div1">
<p>This is a paragraph with a <span>span element</span> inside.</p>
</div>
<button>Show Parent Tag</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var parentTag = $("span").parent().prop("tagName"); // Get the parent tag name
alert("Parent of span is: " + parentTag);
});
});
</script>
</body>
</html>
This method is useful when you want to access or style the container of an
element without affecting higher-level ancestors.
jQuery parents() Method
The parents() method in jQuery is used to retrieve all ancestor elements
of the selected element, climbing all the way up the DOM tree to the root
<html> element.
This method is useful when you need to find or work with any containing
elements above the current one not just its immediate parent.
Example: Get All Ancestors
The following code selects all ancestor elements of every <span> on
the page:
<!DOCTYPE html>
<html>
<head>
<title>jQuery parents() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="div1">
<section>
<p>This is a paragraph with a <span>span element</span> inside.</p>
</section>
</div>
<button>Show Ancestors of Span</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var ancestors = $("span").parents().map(function(){
return this.tagName; // Get tag names of all ancestors
}).get().join(" → ");
alert("Ancestors of span: " + ancestors);
});
});
</script>
</body>
</html>
Example: Filter Ancestors by Type
You can also pass an optional parameter to the parents() method to filter
the results by element type.
The example below selects only the ancestor elements of <span> tags
that are <ul> elements:
<!DOCTYPE html>
<html>
<head>
<title>jQuery parents(selector) Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="list1">
<li>
<p>This is a paragraph with a <span>span element</span> inside.</p>
</li>
</ul>
<button>Show Ancestor UL</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var ancestorUL = $("span").parents("ul").attr("id"); // Get id of ancestor ul
alert("Ancestor UL of span has id: " + ancestorUL);
});
});
</script>
</body>
</html>
This is especially helpful when you're looking for a specific type of
ancestor in a nested structure.
jQuery parentsUntil() Method
The parentsUntil() method in jQuery returns all ancestor elements between
two specified elements in the DOM tree.
Unlike parents(), which returns all ancestors up to the <html> tag,
parentsUntil() stops when it reaches the element you define as the
boundary (excluding it from the result).
Example
The following code retrieves all ancestors of each <span> element
up to but not including the nearest <div>:
<!DOCTYPE html>
<html>
<head>
<title>jQuery parentsUntil Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="div1">
<section>
<p>This is a paragraph with a <span>span element</span> inside.</p>
</section>
</div>
<button>Show Ancestors Until DIV</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var ancestors = $("span").parentsUntil("div").map(function(){
return this.tagName; // Get tag names of ancestors up to div
}).get().join(" → ");
alert("Ancestors of span until div: " + ancestors);
});
});
</script>
</body>
</html>
This method is useful when you want to limit your traversal to a specific
range within the DOM hierarchy.
More topic in jQuery
