$(this) vs this in JavaScript

Question

When writing JavaScript in jQuery is it best to do:

$('.select').click(function(e){
    $(this).something();
    //Or
    this.something();
});

Is there any difference? What are the advantages or disadvantages of either way?

I have asked a similar question in the past, http://stackoverflow.com/questions/3363338/how-does-this-work-in-jquery — Tim, Dec 21 '13 at 10:48
Keep in mind that `$` is a function. `$(this)` calls the function and passes `this` to it. Then you are doing something with the return value. If `$(this)` would simply return `this`, there would never be reason to actually call it. Hence `$(this) !== this` and `$(this).foo()` is potentially something very different than `this.foo()`. — Felix Kling, Dec 21 '13 at 10:56

score 3 · Answer 1 · answered Dec 21 '13 at 10:48

3

$(this) is a jQuery object and this is a pure DOM Element object. See this example:

$(".test").click(function(){
    alert($(this).text());
    //and
    alert(this.text()); // error no method
});

answered Dec 21 '13 at 10:48

Ringo

3,795
3
22
37

score 2 · Answer 2 · answered Dec 21 '13 at 10:45

2

They're completely different. Neither is "better" and you cannot compare their advantages and disadvantages. One is a jQuery object, one is a raw HTML element.

answered Dec 21 '13 at 10:45

user229044

232,980
40
330
338

3

Maybe you should explain the difference, instead of declaring incomparability. – Dec 21 '13 at 10:48
2

@salivan: *"One is a jQuery object, one is a raw HTML element."* that's the difference. – Felix Kling Dec 21 '13 at 10:48
1

@FelixKling I don't think OP will get that. – Dec 21 '13 at 10:49
That is not completely _right_. Using jQuery as library you should stay with jQuery if you do DOM manipulations. Except if you know what you are doing. If jQuery is used on a single page web application and you do things like `this.parentNode.removeChild(this);` instead of `$(this).remove()` often, this could lead to noticeable memory leaks. – t.niese Dec 21 '13 at 10:49
3

To clarify, I think that OP believes that if `$(this).something()` works then `this.something()` works. I'm under the impression he believes that choice of `$(this)` vs `this` is more or less a *stylistic* decision. I'm trying to tell him that it isn't. – user229044 Dec 21 '13 at 10:50
@meagar you are right. upvote. – Dec 21 '13 at 10:51
You should definitely clarify this before it could be considered a "complete" answer. – Justin Hammond Mar 09 '22 at 06:54

score 1 · Answer 3 · answered Dec 21 '13 at 10:55

1

The other answers are correct, however I would like to add that this within the context of $.fn.function also refers to the jQuery object.

For example:

$.fn.function = function() {
  this.width();
}

answered Dec 21 '13 at 10:55

Timovdz

11
2

score 0 · Answer 4 · answered Dec 21 '13 at 10:45

0

In the callback scope of jquery of an event handler this is the pure element.

$(this) would wrap it again into a jquery instance

So the result is very different and it simply depends on what you need...

answered Dec 21 '13 at 10:45

MichaC

13,104
2
44
56

score 0 · Answer 5 · edited Dec 21 '13 at 10:50

0

this and $(this) will give different results as $(this) is jQuery instance and this is HTML element.

edited Dec 21 '13 at 10:50

Afzaal Ahmad Zeeshan

15,669
12
55
103

answered Dec 21 '13 at 10:48

Asmita

1,160
3
10
31

$(this) vs this in JavaScript

5 Answers5