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 .siblings

jQuery .closest

jQuery .next

jQuery .find()

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.

jQuery .parent

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

The jQuery .parent() method returns the parent element of a jQuery object.

jQuery .siblings

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

The jQuery .siblings() method targets all of the sibling elements of a particular element.

.siblings() can be used to add a selected class to an element on click and remove it from all of its sibling elements, ensuring that only one element appears as “selected” at one time.

jQuery .closest

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

The jQuery .closest() method travels up through the DOM tree to find the first (and closest) ancestor element matching a selector string.

jQuery .next

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

The jQuery .next() method targets the next element that shares the same parent element as the original element.

In the following HTML code, the element returned by $('.two').next() would be <li class="three">Item three</li>.

jQuery .find()

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

In jQuery, the .find() method will find and return all descendent elements that match the selector provided as an argument.

This code block shows a snippet of HTML that has a simple shopping list. Using jQuery, the list items inside the shopping list can be selected. The listItems variable will be a jQuery object that contains the two list items from the shopping list.

Traversing the DOM

Lesson 1 of 1

1
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…
2
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…
3
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…
4
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…
5
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 …
6
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…
7
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…