jQuery — Descendants

children()

$("ul").children();            // All direct children
$("ul").children(".active");   // Only matching

find()

$("ul").find("li");           // All descendant li elements
$("ul").find(".highlight");   // Matching descendants

children() vs find()

// children() — one level deep
$("div").children("p"); // Direct child p only

// find() — all levels deep
$("div").find("p"); // All p descendants

contents()

// Get all children including text nodes and iframes
$("p").contents();

Practical: Navigation

// Initialize accordion
$(".accordion-header").click(function() {
    $(this)
        .next(".accordion-content")
        .slideToggle(300)
        .siblings(".accordion-content")
        .slideUp(300);
});

first() and last()

$("ul").children().first();
$("ul").children().last();

Traversal Summary

Method	Direction	Depth
children()	Down	One level
find()	Down	All levels
contents()	Down	Includes text nodes

Mini Practice

1. Select all direct children of a list
2. Use find() to get all nested elements
3. Use first() and last() on children
4. Build a navigation tree

Up Next

Continue with Siblings — navigating between sibling elements.