revision:
With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the DOM tree, starting from the selected (current) element.
An ancestor is a parent, grandparent, great-grandparent, and so on.
A descendant is a child, grandchild, great-grandchild, and so on.
Siblings share the same parent.
jQuery provides a variety of methods that allow us to traverse the DOM. The largest category of traversal methods are tree-traversal.
add() - adds elements to the set of matched elements
addBack() - adds the previous set of elements to the current set
children() - returns all direct children of the selected element
closest() - returns the first ancestor of the selected element
contents() - returns all direct children of the selected element (including text and comment nodes)
each() - executes a function for each matched element
end() - ends the most recent filtering operation in the current chain, and return the set of matched elements to its previous state
eq() - returns an element with a specific index number of the selected elements
filter() - reduce the set of matched elements to those that match the selector or pass the function's test
find() - returns descendant elements of the selected element
first() - returns the first element of the selected elements
has() - returns all elements that have one or more elements inside of them
is() - rhecks the set of matched elements against a selector/element/jQuery object, and return true if at least one of these elements matches the given arguments
last() - returns the last element of the selected elements
map() - passes each element in the matched set through a function, producing a new jQuery object containing the return values
next() - returns the next sibling element of the selected element
nextAll() - returns all next sibling elements of the selected element
nextUntil() - returns all next sibling elements between two given arguments
not() - returns elements that do not match a certain criteria
offsetParent() - returns the first positioned parent element
parent() - returns the direct parent element of the selected element
parents() - returns all ancestor elements of the selected element
parentsUntil() - returns all ancestor elements between two given arguments
prev() - returns the previous sibling element of the selected element
prevAll() - returns all previous sibling elements of the selected element
prevUntil() - returns all previous sibling elements between two given arguments
siblings() - returns all sibling elements of the selected element
slice() - reduces the set of matched elements to a subset specified by a range of indices
Three useful jQuery methods for traversing up the DOM tree are: parent(), parents(), parentsUntil()
The parent() method returns the direct parent element of the selected element. This method only traverse a single level up the DOM tree.
The following example returns the direct parent element of each "span" elements:
p (direct parent) span
<div class="ancestors">
<div style="width:30vw;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
<div style="width:30vw;">div (grandparent)
<p>p (direct parent)
<span>span</span>
</p>
</div>
</div>
</div>
<style>
.ancestors * { display: block; border: .2vw solid lightgrey; color: lightgrey; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("span").parent().css({"color": "red", "border": ".2vw solid red"});
});
</script>
The parents() method returns all ancestor elements of the selected element, all the way up to the document's root element ().
The following example returns all ancestors of all "span" elements:
<div>
<div class="ancestors1" style="width:30vw;">div (great-grandparent)
<ul class="ul1">ul (grandparent)
<li class="li1">li (direct parent)
<span id="span1">span</span>
</li>
</ul>
</div>
</div>
<style>
.ancestors1 * { display: block; border: 0.2vw solid lightgrey; color: lightgrey; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$("#span1").parents(".ul1").css({"color": "blue", "border": "2px solid darkgreen"});
});
</script>
You can also use an optional parameter to filter the search for ancestors.
The following example returns all ancestors of all "span" elements that are "ul" elements.
<div>
<div class="ancestors2" style="width:30vw;">div (great-grandparent)
<ul class="ul2">ul (grandparent)
<li class="li2">li (direct parent)
<span class="span2">span</span>
</li>
</ul>
</div>
</div>
<style>
.ancestors2 * { display: block; border: 0.2vw solid lightgrey; color: lightgrey; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".span2").parents(".ul2").css({"color": "red", "border": "2px solid darkblue"});
});
</script>
The parentsUntil() method returns all ancestor elements between two given arguments.
The following example returns all ancestor elements between a "span" and a "div" element:
<div>
<div class="ancestors3" style="width:30vw;">div (great-grandparent)
<ul class="ul3">ul (grandparent)
<li class="li3">li (direct parent)
<span class="span3">span</span>
</li>
</ul>
</div>
</div>
<style>
.ancestors3 * { display: block; border: 0.2vw solid lightgrey; color: lightgrey; padding: .5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".span3").parentsUntil(".ancestors3").css({"color": "orange", "border": "2px solid magenta"});
});
</script>
Two useful jQuery methods for traversing down the DOM tree are: children() and find().
The children() method returns all direct children of the selected element. This method only traverses a single level down the DOM tree.
The following example returns all elements that are direct children of each "div" element.
p (child) span (grandchild)
p (child) span (grandchild)
Codes:
<div>
<div class="descendants" style="width:30vw;">div (current element)
<p>p (child)
<span>span (grandchild)</span>
</p>
<p>p (child)
<span>span (grandchild)</span>
</p>
</div>
</div>
<style>
.descendants * {display: block; border: 0.2vw solid lightgrey; color: lightgrey; padding: 0.5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".descendants").children().css({"color": "red", "border": "2px solid orange"});
});
</script>
You can also use an optional parameter to filter the search for children.
The following example returns all "p" elements with the class name "first", that are direct children of "div".
p (child) span (grandchild)
p (child) span (grandchild)
<div>
<div class="descendants_1" style="width:30vw;">div (current element)
<p class="first">p (child)
<span>span (grandchild)</span>
</p>
<p class="second">p (child)
<span>span (grandchild)</span>
</p>
</div>
</div>
<style>
.descendants_1 * {display: block; border: 0.2vw solid lightgrey; color: lightgrey; padding: 0.5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".descendants_1").children("p.first").css({"color": "red", "border": "2px solid blue"});
});
</script>
The find() method returns descendant elements of the selected element, all the way down to the last descendant.
The following example returns all "span" elements that are descendants of "div".
p (child) span (grandchild)
p (child) span (grandchild)
Codes:
<div>
<div class="descendants1" style="width:30vw;">div (current element)
<p>p (child)
<span class="spanA">span (grandchild)</span>
</p>
<p>p (child)
<span class="spanA">span (grandchild)</span>
</p>
</div>
</div>
<style>
.descendants1 * {display: block; border: 0.2vw solid lightgrey; color: lightgrey; padding: 0.5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".descendants1").find(".spanA").css({"color": "brown", "border": "2px solid red"});
});
</script>
The following example returns all descendants of "div".
p (child) span (grandchild)
p (child) span (grandchild)
<div>
<div class="descendants2" style="width:30vw;">div (current element)
<p>p (child)
<span>span (grandchild)</span>
</p>
<p>p (child)
<span>span (grandchild)</span>
</p>
</div>
</div>
<style>
.descendants2 * {display: block; border: 0.2vw solid lightgrey; color: lightgrey; padding: 0.5vw; margin: 1.5vw;}
</style>
<script>
$(document).ready(function(){
$(".descendants2").find("*").css({"color": "red", "border": "2px dashed violet"});
});
</script>
There are many useful jQuery methods for traversing sideways in the DOM tree: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil().
siblings() method returns all sibling elements of the selected element.
You can also use an optional parameter to filter the search for siblings.
next() method returns the next sibling element of the selected element.
nextAll() method returns all next sibling elements of the selected element.
nextUntil() method returns all next sibling elements between two given arguments.
prev(), prevAll() and prevUntil() methods work just like the methods above but with reverse functionality: they return previous sibling elements (traverse backwards along sibling elements in the DOM tree, instead of forward).
The most basic filtering methods are first(), last() and eq(), which allow you to select a specific element based on its position in a group of elements.
Other filtering methods, like filter() and not() allow you to select elements that match, or do not match, a certain criteria.
first() method returns the first element of the specified elements.
last() method returns the last element of the specified elements.
eq() method returns an element with a specific index number of the selected elements. The index numbers start at 0, so the first element will have the index number 0 and not 1.
filter() method lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and those that match will be returned.
not() method returns all elements that do not match the criteria.The not() method is the opposite of filter().