Some of the tutorials and开发者_运维技巧 examples I have seen for developing jQuery plugins tend to return
this.each(function () {
//Plugin code here
});
at the end of the function that instantiates the plugin but I have yet to see any reasoning behind it, it just seems to be a standard that everyone follows. Can anyone enlighten me as to the reasoning behind this practice?
Edit: For clarification my question was not about why to return this, but rather why the plugin should return this.each.
When you filter elements with a selector ($('.myclass')
), it can match more than only one element.
With each
, you iterate over all matched elements and your code is applied to all of them.
jQuery supports "chainable methods", which means that most jQuery functions should return this
. .each()
returns this
, and if you want $('selector').yourPlugin().css(...)
to work, you should return this
.
Let me show you two "equivalent" pieces of code that could clarify your question:
With jQuery "each" function:
(function($) {
$.fn.mangle = function(options) {
return this.each(function() {
$(this).append(' - ' + $(this).data('x'));
});
};
})(jQuery);
Without jQuery "each" function:
(function($) {
$.fn.mangle = function(options) {
var objs = this;
for (var i=0; i<objs.length; i++) {
var obj = objs[i];
$(obj).append(' - ' + $(obj).data('x'));
};
return this;
};
})(jQuery);
So, basically, each
function is used to apply some code to all elements contained in this
object (as this
usually refers to a group of elements returned by a jQuery selector) and return the reference to this
(as each
function always returns that reference -to allow chaining calls-)
As a side note: The second approach (-for
loop-) is faster (notably on old browsers) than former one (-each
function-).
When you write a plugin you are extending the jQuery object, and because the jQuery object is a sequence you return this.each(function () { });
so that your plugin is executed for each item of the sequence.
In short it allows you to take advantage of chaining, since it returns everything that has been done till now so the next .anyMethod()
can act upon the changed/modified elements.
Additionally, take a look at these links they will give you a lot of information on jQuery plugin development.
http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-started/
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
http://snook.ca/archives/javascript/jquery_plugin
And here you have a nice web based app that helps you jump start your jQuery plugins. http://starter.pixelgraphics.us/
精彩评论