16

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.

6
  • 3
    possible duplicate of What is the difference between “this”, “$this” and “$(this)”?
    – user113716
    Commented Aug 29, 2011 at 15:13
  • 1
    @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. Commented Aug 29, 2011 at 15:14
  • 1
    @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
    Commented Aug 29, 2011 at 15:20
  • ...or if you don't like that duplicate, here's one that references the same code in the same tutorial: stackoverflow.com/questions/1051782/jquery-this-vs-this
    – user113716
    Commented Aug 29, 2011 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
    Commented Aug 29, 2011 at 15:25

5 Answers 5

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.

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.

3

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.

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().

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.