CODEWITHSUNDEEP
jquery
Isaac Lubow
Isaac Lubow

Reputation: 3573

How does the "this" syntax work?

Is this line

$(this).attr("id").replace("_button","");

equivalent to this one?

this.attr("id").replace("_button","");

Upvotes: 10

Views: 411

Answers (9)

fengd
fengd

Reputation: 7569

I think it's not.

You can use this.id.replace("_button","") instead.

Upvotes: -1

jAndy
jAndy

Reputation: 235962

since this always contains a reference to the object of invocation, it really depends where you call that code.

If you call this within a jQuery event handler, this is a reference to the DOM element itself, so you need to translate it into a jQuery object by calling $() before you can call jQuery methods on it. That in turn means

this.attr("id").replace("_button","");

will not work there.

If you're writting a plugin method for instance, this already IS a jQuery object (reference) and both lines would actually do the same. Of course, if this already is a jQuery object you doing extra work, trying to parse it again.

example:

$.fn.yourplugin = function(){
     // this refers to a jQuery object
     return this.each(function(i,v){
     });
});

Upvotes: 9

Krunal
Krunal

Reputation: 3531

It depends on which context you are using it.

$(this) is a jQuery object and this is a DOM object.

So, they are not same.

If you are developing jquery plugin then this is same as $(this).

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816232

It depends on the context, but probably not.

If you have an event handler, say:

$('#_button_foo').click(function() {
     $(this).attr("id").replace("_button","");
});

Then this will refer to the DOM element whereas $(this) creates a jQuery object and let you call jQuery functions on this object.

On the other side, if you develop a plugin and have

jQuery.fn.plugin = function() {
     this.each(function() {...});
}

then this refers to the jQuery object you call the method on.

Upvotes: 4

selfawaresoup
selfawaresoup

Reputation: 15832

this always refers to the object that the current function is a member of. If the function is global, that's usually the window object, at least if you're in a web browser.

$(this) is actually $() (the main jQuery function) called with the before mentioned this as a parameter. It wraps this into a jquery object that offers all the jQuery methods. These methods are notavailable on just this.

Upvotes: 0

womp
womp

Reputation: 116977

In Javascript, the keyword 'this' refers to the object whose context you're in. So if you're calling myObj.method1(), then inside method1's code, 'this' would refer to myObj.

In jQuery, most operations return a jQuery result set object, often called a jQuery wrapper. For example, the selector $("a") would return a jQuery result set that contains all the <a> DOM elements. $("a").get(0) would return the first anchor DOM element, $("a").get(1) would return the second anchor, etc.

So $(this) refers to the jQuery wrapper object, and this refers to the DOM element.

So to sum it all up: $(this).get(0) would be the same as this.

Upvotes: 1

Gumbo
Gumbo

Reputation: 655129

this refers to the object it is used in. In the global scope it refers to window and in a method call it refers to the object the method is called on.

In your case this will probably refer to an element in the DOM that is fetched with some other jQuery mechanism like an event (click, hover, etc.) or an iteration over a list of elements (like jQuery.each). In that case you only get that DOM element but not a jQuery object with the extension of jQuery methods like attr. So you need to turn it into an jQuery object using the $ constructor function.

Upvotes: 2

Konerak
Konerak

Reputation: 39763

The $(this) will turn the DOM Object into a jQuery object, so you can use the jQuery functions.

So $(this) and this are not the same.

Upvotes: 1

spinon
spinon

Reputation: 10847

No. It sounds like you are in the context of a closure used for a jquery method. Within the function it points to the current DOM object therefore jquery functions wouldn't be possible. That is why it is wrapped with the jquery function to get that object.

Upvotes: 0

Related Questions