Chaining

The Power of Method Chaining

Method chaining is a type of pipe and filter architecture, originally pioneered by jQuery lets you manipulate a DOM element by chaining calls.

// Without chaining
const elements = $('button');
elements.addClass('primary');
elements.attr('aria-pressed', 'false');
elements.css('opacity', '0.9');
elements.on('click', handleClick);

// With chaining
$('button')
  .addClass('primary')
  .attr('aria-pressed', 'false')
  .css('opacity', '0.9')
  .on('click', handleClick);

How Chaining Works

Method chaining works because the return of many methods in Query is the Query Object which can be passed through to another function.

$('.card')
  .addClass('highlighted')         // Returns the Query object
  .find('.title')                  // Returns a new Query object with new elements
    .css('font-weight', 'bold');   // Continues the chain

Each method in the chain operates on the current set of elements, creating a pipeline of transformations.

Types of Methods in a Chain

Understanding the different types of methods in Query helps you build more effective chains:

Accessor Methods

These methods change which elements you’re working with. They modify the selection and return a new Query object.

$('article')
  .find('p')                  // Now working with paragraphs inside articles
    .filter(':first-child')   // Now only first paragraphs
      .next()                 // Now siblings after first paragraphs

Common accessor methods include:

Manipulation Methods

These methods modify the current elements but maintain the same selection. They’re perfect for applying multiple changes to the same elements.

$('button.primary')
  .addClass('important')         // Still working with buttons
  .attr('disabled', false)       // Same buttons
  .css('border-color', 'blue')   // Still the same buttons

Common manipulation methods include:

Terminating Methods

These methods break the chain by returning something other than a Query object. They typically provide information about your selection.

// These return values, not Query objects
const text = $('p').text();                     // Returns a string
const hasClass = $('div').hasClass('active');   // Returns a boolean
const htmlContent = $('.content').html();       // Returns a string
const element = $('button').get(0);             // Returns a DOM element

Common terminating methods include:

text() (when getting text)
html() (when getting HTML)
attr() (when getting an attribute)
hasClass()
is()
get()

Restoring Previous Selections with .end()

One of the most powerful features in Query’s chaining system is the .end() method, which returns to the selection as it was before the most recent accessor method:

$('.card')
  .addClass('processed')        // Add class to cards
  .find('.title')               // Now working with titles
    .css('color', 'blue')       // Style the titles
  .end()                        // Go back to the card selection
  .find('.body')                // Now find the body elements
    .css('line-height', '1.5'); // Style the body

This eliminates the need to store intermediate selections in variables, making your code more concise.

Multi-level Traversal

You can chain multiple .end() calls to go back multiple steps:

$('.article')
  .addClass('featured')          // Style articles
  .find('h2')                    // Move to headings
    .addClass('title')           // Style headings
  .end()                         // Back to articles
  .find('p')                     // Move to paragraphs
    .addClass('text')            // Style paragraphs
    .find('a')                   // Move to links in paragraphs
      .addClass('link')          // Style links
    .end()                       // Back to paragraphs
  .end()                         // Back to articles
  .addClass('processed');        // Add another class to articles

Advanced Chaining Techniques

Contextual Filtering

Combine chaining with filtering to create sophisticated selections:

$('form')
  .find('input')
    .filter('[required]')
      .addClass('highlight')
    .end()
    .filter('[type="email"]')
      .addClass('email-field')
    .end()
  .end()
  .find('button')
    .addClass('form-button');

DOM Construction Chains

Build complex DOM structures with chaining:

$('<div>')
  .addClass('notification')
  .append(
    $('<h3>')
      .addClass('title')
      .text('Update Available').html(),
    $('<p>')
      .addClass('body')
      .text('A new version is available. Please update.'),
    $('<button>')
      .addClass('close')
      .text('×')
      .on('click', function() {
        $(this).closest('.notification').remove();
      })
  )
  .appendTo('body');

Conditional Chaining

Use conditional chaining to apply different operations based on conditions:

$('.item')
  .addClass('processed')
  // Apply additional classes conditionally
  .each(function() {
    const $item = $(this);
    if ($item.hasClass('important')) {
      $item.addClass('highlight priority');
    } else if ($item.hasClass('warning')) {
      $item.addClass('attention');
    }
  });

Chain Optimization Tips

Minimize DOM traversals - Group operations on the same selection to avoid unnecessary traversals

// Less efficient - traverses the DOM multiple times
$('.card').addClass('active');
$('.card').css('color', 'blue');
$('.card').on('click', handleClick);

// More efficient - single traversal
$('.card')
  .addClass('active')
  .css('color', 'blue')
  .on('click', handleClick);

Filter early - Narrow your selection as soon as possible to work with fewer elements

// Less efficient - works with all elements before filtering
$('li')
  .addClass('item')
  .filter('.special')
  .addClass('important');

// More efficient - filters first
$('li.special')
  .addClass('item important');

Store reused selections - For complex operations, sometimes variables are clearer than deep chaining

// If you're repeatedly working with the same elements
const $forms = $('form.registration');

$forms.find('input').addClass('form-control');
$forms.find('button').addClass('btn');

Next Steps

Now that you understand Query’s powerful chaining capabilities, explore:

On This Page