Search jQuery

jQuery Forum

in Getting Started • 8 years ago

Given the following code INSIDE A PLUGIN , where exactly is $(this) pointing to ??

EXMPLE ONE :

var current = $(this); // declared as a global variable inside a plugin. EXAMPLE TWO

EXAMPLE TWO :

EXAMPLE THREE : (This is not a function , this snippet of code is typed in the global scope of the plugin) :

now given that i call the plugin this way :

what does the $(this) point to ? (i actually want $(this) to point to the current selected element , which in this case is $('img')).

Thank you .

Gautam .

Replies(5)

8 years ago

this is the same as window, unless it was set up in a .call() or .apply().

jQuery usually sets up this for you inside an .each loop or in an event handler ( by using .call() or .apply() ) .

Inside a plugin the first this is the jQuery selector that was before the plugin.

Inside a .each loop it is the element that you are at.

Remember that with each new function, this gets set.

#1 doesn’t have this. Globally it was set to window.

#2 depends on how number_of_image was called.

#3 this is window, so it makes no sense.

JΛ̊KE

8 years ago

Jake Thanks for the explanation , but i did't quite get it why the #3 does't make sense .

suppose i have the following jquery plugin:

and i am using this plugin to count the number of times a selected element occurs in a HTML document :

so say i call the plugin like this :

say in the html document i had 10 img tags. the plugin successfully logs 10 .

8 years ago

Each function changes this!

(function($) { // still window
$.fn.plugin = function(options) { // this becomes a jQuery of all the img elements
var count = 0;
$(this).each(function() { // this becomes each img element
count++;
}); // back to all imgs
return this.each(function() { // this becomes each img element
console.log(count);
});
}
}(jQuery));
$(document).ready(function(){ // still window
$('img').plugin();
});