Under what conditions do chained jQuery objects offer performance gains?

I'm working with some code that adds and removes various CSS classes on the same object. The code looks something like:

function switch_states(object_to_change) {
  if(object_to_change.hasClass('ready') {
    object_to_change.removeClass('re开发者_如何学运维ady');
    object_to_change.addClass('not_ready');
  } else {
    object_to_change.removeClass('not_ready');
    object_to_change.addClass('ready');
  }
}

I suspect I might be able get away with chaining these two snippits into something like object_to_change.removeClass('ready').addClass('not_ready'); But I have to wonder: besides legibility and the neato factor, does this give me any performance gains?

My question: Would a chained objects do their work any faster than two non-chained ones? If so, why? If not, at what point does using chained objects become more efficient than disparate ones -- i.e. under what conditions do chained jQuery objects offer performance gains?

---

Would a chained objects do their work any faster than two non-chained ones? If so, why?

Chained objects are faster when they start with a selector, and chaining prevents the selector being run against the DOM multiple times (a comparatively expensive operation).

Slower:

$(".myClass").val(123);
$(".myClass").addClass("newClass");

Faster:

$(".myClass")
    .val(123)
    .addClass("newClass");

Caching the selector in a variable has the same benefits as chaining (i.e. preventing expensive DOM lookups):

var $selctor = $(".myClass");
$selector.val(123);
$selector.addClass("newClass");

---

In your example, the answer is no. However what chaining does is give you the ability to not declare variables in places where you can just use the chain (and current stack of elements) to perform various tasks.

I would recommend using chaining with newlines - this has become somewhat of a jQuery convention.

---

Well, you can't really chain an if() statement, but jQuery has a toggleClass() method that would seem appropriate here:

object_to_change.toggleClass('ready not_ready');

This removes the need for chaining vs separate calls in the first place. I don't know how it compares in terms of performance. Would need to test.

---

EDIT: I should note that the solution above implies that the object already has one or the other. If not, another approach would be to pass a function to toggleClass.

object_to_remove.toggleClass(function( i, cls ) {
    return cls.indexOf( 'ready' ) == -1 ? 'ready' : 'ready not_ready';
});

---

No performance gains here: it's the same object. Just the neato factor, which should not be underestimated.

---

The most obvious performance gain is in development and maintenance. If the code is clean, readable, and intent is apparent -- developer time should be reduced.

While this needs to be balanced against code performance, if there is a tested, measurable difference, then optimize for speed. If at all possible, without reducing the readability of the code.

If readability/maintainability of the code will be impacted, look to see if the optimizations can be automated as part of the build process, to keep the maintainable code for further development.