Skip to content
jQuery

Method Chaining

Chain jQuery methods and use end() to restore context.

By EZ4Code Team
chainingfluent-api

Code

// Most methods return the jQuery object, enabling chains
$("#box")
  .addClass("highlight")
  .css({ color: "red", "font-weight": "bold" })
  .slideDown(300)
  .find("span")
    .text("Updated")
    .end()
  .attr("data-status", "ready");

// end() pops the most recent filtering/traversal step
$("ul")
  .find("li")
    .addClass("item")
    .end()
  .addClass("list");

Explanation

Chaining works because most jQuery methods return the same jQuery object. Methods like find() create a new context, and end() restores the previous one to continue chaining. This produces concise, expressive code without intermediate variables.

More jQuery Snippets

Selectors

Select elements by id, class, attribute, and pseudo-filters.

Events & Delegation

Bind handlers with on(), support delegation and namespaced removal.

DOM Manipulation

Get/set text, html, attributes, classes, and insert nodes.

AJAX Requests

Use $.ajax, $.get, $.post, and load with promises.

Effects & Animation

Show, hide, fade, slide, and animate elements.

Traversing the DOM

Navigate relatives and filter the matched set.