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.

Traversing the DOM
Lesson 1 of 1
  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. 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. 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. 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. 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. 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. 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

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo