jQuery .children() Method

What You’ll Learn

The .children() traversing method collects direct child elements of each matched parent — one level down the DOM tree, optionally filtered by a selector. This tutorial follows the official jQuery nested-list demo, click-to-highlight children pattern, and compares .children() with .find() and .contents().

Introduction

Parent elements often contain a mix of direct children — list items inside a <ul>, paragraphs and spans inside a <div>, table rows inside a <tbody>. When you need to target those immediate offspring without grabbing deeper nested nodes, jQuery provides .children().

Available since jQuery 1.0, .children() walks exactly one level down from each element in the current set and builds a new jQuery object from the matching child elements. Pass an optional selector to keep only children that match a CSS expression.

Understanding the .children() Method

Given a jQuery object representing one or more DOM elements, .children([selector]) searches the direct children of each element and returns them as a new jQuery collection. Grandchildren and deeper descendants are excluded unless you use .find() instead.

Like most jQuery methods, .children() returns only element nodes — not text nodes or comments. To include text and comment nodes, use .contents(). The method does not modify the DOM; it only queries what is already on the page.

📝 Syntax

General form of .children:

.children( [selector ] )

Parameters

• selector (optional) — a string containing a selector expression. When provided, only direct children matching the selector are included in the result.

Return value

• A new jQuery object containing the direct child elements of each matched parent, optionally filtered.

Official jQuery API nested-list example

$( "ul.level-2" ).children().css( "background-color", "red" );
// Direct li children A, B, C → red
// Nested li 1, 2, 3 inside B are NOT selected

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

$( "ul.level-2" ).children().css( "background-color", "red" );

li A, B, C → red background
Nested li 1, 2, 3 under B → unchanged

$( "div" ).children().css( "border-bottom", "3px double red" );

Every p, span, and other direct child of each div gets a red double border-bottom.

$( "div" ).children( ".selected" ).css( "color", "blue" );

Only direct children with class "selected" turn blue.
Nested .selected inside a child p is NOT matched.

$( "#container" ).on( "click", function ( event ) {
  $( "*" ).removeClass( "hilite" );
  var kids = $( event.target ).children();
  var len = kids.addClass( "hilite" ).length;
  console.log( "Found " + len + " children in " + event.target.tagName );
  event.preventDefault();
} );

Click a div → its direct child elements highlight.
Console logs count and tag name of clicked element.

var withChildren = $( "ul.level-2" ).children( "li" ).length;
var withFind = $( "ul.level-2" ).find( "li" ).length;

console.log( "children:", withChildren ); // 3 — A, B, C only
console.log( "find:", withFind );         // 6 — includes nested 1, 2, 3

children: 3
find: 6

🚀 Common Use Cases

• Navigation menus — select top-level li items with $("ul.menu").children("li").
• Table rows — target direct tr children of tbody without nested tables.
• Form field groups — style immediate inputs inside a fieldset container.
• Accordion panels — toggle direct panel headers without affecting nested content wrappers.
• Interactive exploration — highlight direct children on click for DOM debugging.
• Filtered child actions — bind events to .children("button") only.

📝 Notes

• Available since jQuery 1.0; works in all jQuery 1.x, 2.x, and 3.x versions.
• Travels exactly one DOM level — not grandchildren or deeper descendants.
• Does not return text nodes — use .contents() for text and comments.
• Empty parents return an empty jQuery object — safe to chain without errors.
• Selector is optional; omit it to get all direct child elements.
• For all depths, use .find(selector) instead of .children(selector).

💡 Best Practices