? jQuery Traversing - Descendants

? Quick Overview

Descendant traversal moves down the DOM tree. jQuery provides methods to select direct children or deeply nested elements.

? View Code Example

// Basic descendant traversal syntax
$(selector).children();
$(selector).children(".className");
$(selector).find("tag, .class, #id");

Hierarchy: Wrapper → Row → Cell

Wrapper #1

Row A A1 A2

Row B B1 B2

? View Code Example

// Selecting direct children of wrapper
$('#wrap-1').children();
// Selecting only .row children
$('#wrap-1').children('.row');

Hierarchy: Box → Inner → Deep → Leaf

Box #1

Leaf 1 Leaf 2

Box #2

Leaf 3

? View Code Example

// Finding elements at any depth
$('.box').find('.leaf');
$('#box-1').find('.leaf.special');

Use children() to narrow scope, then find() to dive deeper.

R1 R2

R3 R4

? View Code Example

// Chain traversal for precision
$('#wrap-3').children('.row').find('.tag').addClass('highlight');

Type a selector below to see how children() vs find() behaves on the "Master Container".

Master Container

Direct Child (div) Nested Child (span)