What is the difference between "$(this)" and "this"?

Question

I was reading the http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery. And got confused with use of this in these 2 code segments.

     $(document).ready(function() {
        $("#orderedlist").find("li").each(function(i) {
        $(this).append( " BAM! " + i );
       });
     });

    $(document).ready(function() {
      // use this to reset several forms at once
       $("#reset").click(function() {
        $("form").each(function() {
         this.reset();
        });
     });
   });

When do we need $(this) and this? And what is the difference between them? Thanks in advance.

possible duplicate of [What is the difference between “this”, “$this” and “$(this)”?](http://stackoverflow.com/questions/3889570/what-is-the-difference-between-this-this-and-this) — user113716, Aug 29 '11 at 15:13
@patrick: I don't think it's a duplicate. It's worth answering why `$(this)` is needed in one part of this particular code while `this` is needed in a different part. — Blazemonger, Aug 29 '11 at 15:14
@mblase75: Well, I guess I disagree. That answer, coupled with what the tutorial already explains makes it a duplicate. Reading the answers to the other question should solve it. From the tutorial: *"Note that in an `.each()` function, `this` refers to the actual element."* — user113716, Aug 29 '11 at 15:20
...or if you don't like that duplicate, here's one that references the same code in the same tutorial: http://stackoverflow.com/questions/1051782/jquery-this-vs-this — user113716, Aug 29 '11 at 15:24
Thanks a lot for ur quick responses. @patrick take it easy man. I'm trying to learn something and people are just helping me. You might be in that stage at some point. — gmail user, Aug 29 '11 at 15:25
@gmail user: Take it easy? [This is how StackOverflow works.](http://stackoverflow.com/faq#questions) It is expected that you've done some basic research first and searched the site to see if the question already exists. That's why StackOverflow bombards you with possible duplicate questions while you're creating the post. You should be searching through those to see if the question has already been asked and answered. Don't take it personally. — user113716, Aug 29 '11 at 15:30

Blazemonger · Accepted Answer · 2012-05-18T13:15:28.420

17

this refers to the DOM element itself; $(this) wraps the element up in a jQuery object.

In the first example, you need $(this) because .append() is a jQuery method.

In the second example, reset() is a JavaScript method, so no jQuery wrapper is needed.

edited May 18 '12 at 13:15

answered Aug 29 '11 at 15:12

Blazemonger

90,923
26
142
180

score 7 · Answer 2 · answered Aug 29 '11 at 15:11

7

this by itself is just a regular object.

$(this) takes this and adds the jQuery wrapper so you can use the jQuery methods with the object.

answered Aug 29 '11 at 15:11

Justin Niessner

242,243
40
408
536

score 3 · Answer 3 · answered Aug 29 '11 at 15:11

this refers to a DOM object. So reset() is a function of a form DOM object. append() on the other hand is a jQuery method so it has to be called by a jQuery object, hence the $(this).

When you surround this with $, you get a jQuery object back representing that DOM object.

score 2 · Answer 4 · answered Aug 29 '11 at 15:12

2

Generally in jQuery, this will be an instance of the DOM element in question, and $(this) builds a jQuery object around this which gives you the usual jQuery methods like each() and val().

answered Aug 29 '11 at 15:12

user229044

232,980
40
330
338

score 1 · Answer 5 · answered Aug 29 '11 at 15:13

1

you only need $(this) if you are following it with a jquery function on the same line of code.

ex: $(this).find(...);    $(this).val();   etc

or else you only need this.

answered Aug 29 '11 at 15:13

Johnny Craig

4,974
2
26
27

What is the difference between "$(this)" and "this"?

5 Answers5