Learn jQuery: Course OverviewCourse Overview

Learn jQuery: Traversing the DOM

In this course, you will learn about jQuery methods that allow you to access elements in the DOM, based on their relative position.

Start

Key Concepts

Review core concepts you need to learn to master this subject

jQuery children

jQuery .parent

jQuery .next

jQuery .find()

jQuery .siblings

jQuery .closest

jQuery children

<div class="parent">
  <div class="item">Child 1</div>
  <div class="item">Child 2</div>
  <div class="item">Child 3</div>
</div>

The jQuery .children() method returns all child elements of a selected parent element.

This method only applies to the direct children of the parent element, and not deeper descendents.

In the example code, $('.parent').children() would select all the .item elements.

Traversing the DOM

Lesson 1 of 1

1
The DOM Tree
jQuery makes it easy to target HTML elements by tag name, class, and id. We can also dynamically target a single element in a given class by accessing an event’s .currentTarget attribute. In this l…
Start
2
Children
According to the DOM tree, the outermost element is the parent of all elements inside of it. Therefore, the HTML elements inside of the outer element are children. The jQuery .children() method…
Start
3
Parent & Siblings
In addition to the .children() method we covered in the last exercise, there are two methods you can use to select the parent and siblings of an element. $(‘.choice’).on(‘click’, event => { $(ev…
Start
4
Closest
To select an element close to the current element, we can use jQuery’s .closest() method. The .closest() method will travel up the DOM tree to find a specified selector closest to it. Its syntax l…
Start
5
Next
Sometimes you don’t want to target all the siblings of an element — you just want to target the next one. That’s where the aptly-named .next() method comes in! The code below is HTML for a …
Start
6
find
Sometimes we want to target an element that lives inside another, but we don’t want to use the .children() method, since that might target more elements than we need. That’s where the .find() metho…
Start
7
Review: Traversing the DOM
Understanding how elements relate to each other in the DOM makes it easy to efficiently select elements. We have covered several methods in this lesson including: - .children() to target an eleme…
Start