jQuery — Chaining

Basic Chaining

$("h1")
    .css("color", "red")
    .addClass("highlight")
    .fadeIn(300);

Why Chain?

// Without chaining
$("h1").css("color", "red");
$("h1").addClass("highlight");
$("h1").fadeIn(300);

// With chaining
$("h1").css("color", "red").addClass("highlight").fadeIn(300);

Chain with Indentation

$("div")
    .addClass("container")
    .css("border", "1px solid #ccc")
    .fadeIn(400)
    .animate({ width: "300px" }, 500)
    .queue(function() {
        $(this).addClass("expanded");
        $(this).dequeue();
    });

Chaining with Find

$("ul")
    .find("li")
    .first()
    .addClass("active")
    .end()
    .last()
    .addClass("last-item");

end()

Reverts to the previous selection:

$("ul")
    .find("li")
    .addClass("item")      // Applies to li elements
    .end()                  // Back to ul
    .addClass("has-items"); // Applies to ul

When NOT to Chain

• When methods return non-jQuery objects
• When readability suffers
• When using callbacks that need separate variables

Mini Practice

1. Chain five different methods on a single element
2. Use find() and end() together
3. Replace sequential statements with a chain
4. Queue a custom function in a chain

Up Next

Continue with HTML — getting and setting HTML content.