To make my question more specific, I read the documentation on .each() for jQuery, but I am a little more confused. I have this code:
$.fn.imgAreaSelect = function (options) {
options = options || {};
this.each(function () {
if ($(this).data('imgAreaSelect')) {
if (options.remove) {
$(this).data('imgAreaSelect').remove();
$(this).removeData('imgAreaSelect');
}
else
$(this).data('imgAreaSelect').setOptions(options);
}
else if (!options.remove) {
if (options.enable === undefined && options.disable === undefined)
options.enable = true;
$(this).data('imgAreaSelect', new $.imgAreaSelect(this, options));
}
});
if (options.instance)
return $(this).data('imgAreaSelect');
return this;
};
Now what I don't get about this is that why does the each function not have an index or an element? This snippet of code is from a jQuery plugin that I was trying to read over. I also don't quite understand the $.fn. at the top, i know it stands for prototype, but what's exactly going on here?
The each() method specifies a function to run for each matched element. Tip: return false can be used to stop the loop early.
each() jQuery's each() function is used to loop through each element of the target jQuery object — an object that contains one or more DOM elements, and exposes all jQuery functions. It's very useful for multi-element DOM manipulation, as well as iterating over arbitrary arrays and object properties.
Learn how to loop through elements, arrays and objects with jQuery using the $. each() function, jQuery's foreach equivalent. jQuery's foreach equivalent can be very useful for many situations. These examples will get you started and teach you how you can loop through arrays, objects and all kinds of HTML elements.
In javascript, $(this) means nothing but a method call - it calls a method named $() and passes the object referred by the keyword this . When you talk about in the context of jQuery, $ refers to the jQuery library and that method returns a jQuery object which refers to the dom elements referred by the argument passed.
Output: $(this): It also refers to the object it belongs to. Basically, both are the same. But when this keyword is used inside $(), then it becomes a jQuery object, and now we can use all properties of jQuery on this method.
It is common to see jQuery programs call $(document) or $(this) , for example. jQuery objects can represent more than one element in a document, and you can also pass an array of elements to $() . In this case, the returned jQuery object represents the set of elements in your array.
The each function can take a function accepting an index as a parameter, but it's optional.
For simplicity's sake, .each
was implemented to have this
refer to the current element.
However, .each
can accept an index as a parameter to it's callback.
There's an example of that usage in the jQuery API
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});
Reference - http://api.jquery.com/each/
It doesn't need an index, since this
provides the context. As noted by the docs, "The value can also be accessed through the this keyword." This is accomplished by using call. Something like:
userFunction.call(valueOfElement, indexInArray, valueOfElement);
$.fn.imgAreaSelect = function (options)
means the function is being added to the prototype. This allows it to be used with any instance of the jQuery object.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With