Traversing and chaining

Move around the DOM tree with parent, children, find, siblings and closest, and chain commands.

Lesson 7 of 90% of the track complete

What you'll learn

How to start from one element and reach its parent, children, siblings and descendants, and how to chain several commands in one line.

Why it matters

Often you know one element, such as the button that was clicked, and need to change something related to it, such as its row or its neighbour. Traversal lets you navigate from where you are instead of giving everything an id.

Explanation

Traversing means moving through the DOM tree relative to an element:

.parent() and .parents(): the element above, or all ancestors.
.closest(selector): the nearest ancestor (or itself) that matches.
.children(): direct children. .find(selector): any descendant that matches.
.siblings(), .next(), .prev(): elements at the same level.
.first(), .last(), .eq(n), .filter(), .not(): narrow the current selection.

Chaining: most jQuery methods return the selection, so you can keep calling methods on it:

.end() steps back to the previous selection in a chain.

Example

Step-by-step walkthrough

Inside the click handler, $(this) is the button that was clicked.
.closest(".row") walks up to the task row that contains the button, and .addClass("done") strikes it through.
.next() selects the row after it, which we highlight as the next task.
.not(".done") removes finished rows from the selection, so we can count the rest.
After one click, the info line says 1 done, 2 to go. Each extra click updates it.

Try it yourself

Click the Done buttons in the preview, and then change .next() to .prev() and see which row is highlighted.

TraversingjQuery

Ctrl+Enter to run

Common mistakes

Using .parent() when you need .closest(). .parent() goes up exactly one level.
Using .children() when the element is deeper. Use .find() for any depth.
Forgetting an empty selection does nothing, with no error to warn you.
Very long chains that are hard to read. Break them over lines.

Quick quiz

Question 1 of 3

What does $(this).closest(".row") return?

The nearest ancestor with class rowAll rows on the pageThe first child

Question 2 of 3

Which finds descendants at any depth?

.find().children().parent()

Question 3 of 3

Why does chaining work?

Most methods return the jQuery selectionjQuery runs them in parallelIt is a CSS feature

Summary

Traverse with .parent(), .closest(), .children(), .find(), .siblings(), .next() and .prev().
Narrow with .first(), .eq(), .filter() and .not().
Chain methods because they return the selection.

Next: working with forms.

HTML

<style>
  .row { padding: 6px; border: 1px solid #ccc; margin: 4px 0; }
  .done { background: #d1fae5; text-decoration: line-through; }
  .hl { background: #fde68a; }
</style>

<div class="row"><span>Buy milk</span> <button class="check">Done</button></div>
<div class="row"><span>Call Ravi</span> <button class="check">Done</button></div>
<div class="row"><span>Study</span> <button class="check">Done</button></div>
<p id="info"></p>

<script>
  $(".check").on("click", function () {
    $(this).closest(".row").addClass("done");
    $(this).closest(".row").next().addClass("hl");
    $("#info").text($(".done").length + " done, " + $(".row").not(".done").length + " to go");
  });
</script>