Find Direct Children of an Element Using jQuery

This guide demonstrates how to select only the direct children of a DOM element using jQuery. You will learn how to utilize the primary .children() method, filter specific direct elements, understand the difference between direct child traversal and deep tree traversal, and see alternative CSS child selector syntax in action.

The .children() Method

The primary and most efficient way to get all direct children of an element in jQuery is the .children() method. Unlike .find(), which searches through all descendants (including grandchildren and deeper levels), .children() only travels a single level down the DOM tree.

Basic Syntax

To select every direct child of a target element:

$("#parentElement").children();

Example Usage

Given the following HTML structure:

<ul id="main-list">
  <li>Direct Item 1</li>
  <li>
    Direct Item 2
    <ul>
      <li>Nested Sub-item (Grandchild)</li>
    </ul>
  </li>
  <li>Direct Item 3</li>
</ul>

You can target and modify only the direct <li> elements like this:

// Applies a red border only to Direct Item 1, 2, and 3
$("#main-list").children().css("border", "1px solid red");

In this case, the nested sub-item will not be selected because it is not an immediate child of #main-list.

Filtering Direct Children

If you only want specific direct children, you can pass an optional selector expression directly into the .children() method.

// Selects only direct children with the class 'highlight'
$("#parentElement").children(".highlight");

// Selects only direct <div> children
$("#parentElement").children("div");

Alternative: The Child Combinator Selector (>)

You can also achieve this by using the CSS direct child combinator (>) inside standard jQuery selector calls:

// Selects all direct children
$("#parentElement > *");

// Selects only direct child <li> elements
$("#parentElement > li");

While both approaches work, the .children() method is generally preferred in jQuery for better performance and readability when chaining DOM manipulation methods.

.children() vs. .find()

Understanding the distinction between these two methods prevents unintended styling or event-handling bugs:

• .children(): Traverses only one level down. Use this when you only want direct child elements.
• .find(): Traverses all descendant levels down. Use this when you need to locate elements anywhere inside the container, regardless of how deeply nested they are.