Koren Leslie Cohen

  • About
  • Blog
  • Contact

4 comments

JavaScript

Traversing the DOM with jQuery

October 11, 2014 by Koren Leslie Cohen

front end engineer interview questions

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.


  • About
  • Latest Posts
Connect
Koren Leslie Cohen
Product manager at Facebook. Former senior product manager at Dollar Shave Club in Los Angeles and software engineer at J.Crew / Madewell in New York City. Recovering trial lawyer.
Connect
Latest posts by Koren Leslie Cohen (see all)
  • 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

Related Posts

JavaScript Objects & Prototypes
Precompiling Handlebars Templates

Share

Facebook Google+ Twitter Pinterest Email

Comments Cancel reply

Your email address will not be published. Required fields are marked *

*

code

  1. Zack Sheppard says

    October 27, 2014 at 10:00 am

    Great and very handy post. Thanks Koren!

    Reply
    • Koren Leslie Cohen says

      October 28, 2014 at 11:19 am

      Thanks, Zack! Happy to help!

      Reply
  2. Francisco says

    July 6, 2015 at 12:51 pm

    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.

    Reply
    • Koren Leslie Cohen says

      July 6, 2015 at 1:00 pm

      Better late than never! 😉

      Reply

Back to Blog

  • GitHub
  • Instagram
  • LinkedIn
  • RSS
  • Twitter

Looking for something?

Copyright 2023 Koren Leslie Cohen