how does jquery chaining work?

Question

I am not asking what is the appropriate syntax for chaining, I know it could be something like:

$('myDiv').removeClass('off').addClass('on');

However I'm really curious to understand the inner working of it, as far as I know chaining is one of the advantages against other famous frameworks but this us to much abstraction for a novice programer like me, I'm sure there is someone out there that can provide me with a explanation that allows me to understand how chaining works.

Thanks!

Solution 1

If you have an object with certain methods, if each method returns an object with methods, you can simply call a method from the object returned.

var obj = {   // every method returns obj---------v
    first: function() { alert('first');   return obj; },
    second: function() { alert('second'); return obj; },
    third: function() { alert('third');   return obj; }
}

obj.first().second().third();

DEMO: http://jsfiddle.net/5kkCh/

Solution 2

All that it is doing is returning a reference to this when the method finishes. Take this simple object for example:

 var sampleObj = function()
 {
 };

 sampleObj.prototype.Foo = function()
 {
     return this;
 };

You could chain these calls all day because you return a reference to this:

var obj = new sampleObj();
obj.Foo().Foo().Foo().Foo() // and so on

jQuery simply performs an operation, then returns this.

Solution 3

Basically the first function call $('myDiv') returns a jQuery object, then each subsequent call returns the same one.

Loosely,

var $ = function(selector) {
   return new jQuery(selector);
};

jQuery.prototype.removeClass = function(className) {
   // magic
   return this;
}

Solution 4

return $this;

each jQuery function returns an instance of the jQuery class, which can then have methods called on it. you could break it down, and this code would have the same effect.

jQuery_obj = $('myDiv');
jQuery_obj = jQuery_obj.removeClass('off');
jQuery_obj = jQuery_obj.addClass('on');

Solution 5

In chaining parent function/method returns an object which is then used by the child function/method, and things go on such a way. In short the jQuery or $ returns itself (an object) which allows the chaining.

It is the same mechanism below

var obj=$('input');    //returns jQuery object
var obj1=obj.val('a'); //returns jQuery object
var obj2=obj1.fadeOut();//returns jQuery object

It looks like this if it is done with chaining

$('input').val('a').fadeOut();

View more solutions

Comments

[isJustMe]

I Liked the example, made it more simple.. Thanks

[Derek 朕會功夫]

Instead of return obj, can you say return this? Because I tested and it gives me the same result.

[Admin]

@Derek: You could do that, because this in the functions in the example will be the object each method was called on.

[tacos_tacos_tacos]

@Derek朕會功夫 I think that for people who are new-er to JavaScript the @squint answer's way of doing it (returning a reference to a variable instead of this) is clearer because var that = this seems to turn people off in my experience to wanting to learn programming, and they think it's hard. But I think your suggestion is clearer because it makes it more obvious how you might go about implementing multiple "depths" of chains

[K3NN3TH]

i find this explains how it works more than the accepted answer.

[Muhammad Umer]

how accessing like array works, $('a')[0] gives first element

[Dave Branton]

Since those functions contain 'obj' in their closure scope, doesn't this create a circular reference? Returning 'this' avoids that problem, so it's probably what you should do.