If you do any front end development, you will have to navigate your DOM and properly target DOM elements. Several jQuery functions exist to traverse the DOM. Having a strong command of the most common traversal functions will speed up your development time immensely.
Being able to quickly navigate your DOM is useful for a variety of reasons. Perhaps you need to target a particular list item, or perhaps you have multiple elements with the same class and need to target only one instance. Sometimes multiple traversal methods must be chained to target specific DOM elements.
All examples will use the following code:
<ul class="one">
<li class="A">A</li>
<li class="B">B</li>
<ul class="two">
<li class="I">I</li>
<li class="II">II</li>
<ul class="three">
<li class="a">a</li>
<li class="b">b</li>
<li class="c">c</li>
</ul>
</li>
<li class="III">III</li>
</ul>
</li>
<li class="C">C</li>
</ul>
.find
.find moves down the DOM tree and finds all matching elements. The element itself is not included in the search.
$("li.B").find("li").css("opacity", "0.5");
would move down the DOM tree and target the following li: I, II, a, b, c, III. .find does not include the targeted element, so B would not be included.
.children
.children functions the same as .find, but only moves one level down the DOM tree and targets all children. Like .find, the element itself is not included.
$("li.B").children("li").css("opacity", "0.5");
would target only I, II, III, as those are the li one level immediately down the DOM tree.
.closest
.closest moves up the DOM tree, including the element itself, until it finds a matching element.
$("li.B").closest("li").css("opacity", "0.5");
would target the li with class B, since .closest begins with the element itself.
$("li.B").closest("ul").css("opacity", "0.5");
would move up the DOM tree and target the ul with class one.
.parent
.parent also moves up the DOM tree a single level and targets the parent element. The element itself is not included.
$("li.II").parent().css("opacity", "0.5");
would target the parent ul with class two.
.parents
.parents moves up the DOM tree and targets all parent elements. The element itself is not included.
$("li.II").parents().css("opacity", "0.5");
would target all parent elements, all the way up to and including <body> and <html> which don’t appear in the above code example.
.next
.next moves down and targets the immediately following sibling. The element itself is not included.
$("li.b").next().css("opacity", "0.5");
would target the the li with class c.
.prev
.prev functions just like .next, but moves up, targeting the immediately preceding sibling. The element itself is not included.
$("li.b").prev().css("opacity", "0.5");
would target the the li with class a.
.siblings
.siblings targets moves up and down, targeting all siblings. The element itself is not included.
$("li.b").siblings().css("opacity", "0.5");
would target both a and c.
.next, .prev and .siblings (and all of the other traversal methods) can also target specific selectors, so something like
$("li.b").prev(".selector").css("opacity", "0.5");
would target the preceding sibling with the class selector.
.first
.first targets the first element in a set.
$("li").first().css("opacity", "0.5");
would target the first li in the above code.
.last
.last s the opposite of .first, and targets the last element in a set.
$("li").last().css("opacity", "0.5");
would target the last li above.
- PM Career Story - April 28, 2022
- How to Transition into Product Management - December 26, 2017
- What I’ve Learned in My First Few Months as a Product Manager - October 14, 2015
Great and very handy post. Thanks Koren!
Thanks, Zack! Happy to help!
So bad I found this post late. In the project I’m working right now I’ve used many of these functions you mentioned, however I’ll bookmark this post.
Cool article, BTW.
Better late than never! 😉