Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In jQuery, how does the this.each() work?

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?

like image 629
anthonypliu Avatar asked Jun 24 '10 00:06

anthonypliu


People also ask

What is each () function in jQuery?

The each() method specifies a function to run for each matched element. Tip: return false can be used to stop the loop early.

How each loop works in jQuery?

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.

Can we use foreach in jQuery?

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.

What does $( this represent with each method?

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.

What is the use of this in jQuery?

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.

What is $() in jQuery library?

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.


2 Answers

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/

like image 133
Jamie Wong Avatar answered Nov 15 '22 01:11

Jamie Wong


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.

like image 35
Matthew Flaschen Avatar answered Nov 15 '22 01:11

Matthew Flaschen