jQuery — Traversing

Traversing Methods

$("div").children();        // Direct children
$("div").find("p");         // All descendants
$("p").parent();            // Direct parent
$("p").parents();           // All ancestors
$("p").closest("div");      // Closest ancestor
$("p").siblings();          // All siblings
$("p").next();              // Next sibling
$("p").prev();              // Previous sibling

Filter

$("li").filter(".active");       // Keep matching
$("li").filter(function(i, el) {
    return $(el).text().length > 5;
});

$("li").not(".inactive");        // Remove matching
$("li").first();                 // First element
$("li").last();                  // Last element
$("li").eq(2);                   // Third element

each()

Iterate over matched elements:

$("li").each(function(index, element) {
    console.log(index + ": " + $(element).text());
});

map()

Transform elements:

var texts = $("li").map(function() {
    return $(this).text();
}).get();
console.log(texts);

is()

Check if element matches a selector:

if ($("li").first().is(".active")) {
    console.log("First item is active");
}

has()

Filter elements that contain matching descendants:

$("div").has("p").addClass("has-paragraph");

Mini Practice

1. Find all children of a container
2. Use closest() to find the parent
3. Filter a list by class
4. Iterate with each()

Up Next

Continue with Ancestors — navigating up the DOM tree.