jQuery $(this) vs this

Question

Hello,

I am currently working through this tutorial: Getting Started with jQuery

For the two examples below:

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

});

$("#reset").click(function() {
 $("form").each(function() {
   this.reset();
 });

});

Notice in the first example, we use $(this) to append some text inside of each li element. In the second example we use "this" directly when resetting the form.

$(this) seems to be used a lot more often than "this".

My guess is in the first example, $() is converting each li element into a jQuery object which understands the append() function whereas in the second example reset() can be called directly on the form.

Basically we need $() for special jQuery-only functions.

Is this correct?

Thank you very much!!!

Answer 1

Yes you only need $() when you're using jQuery. If you want jQuery's help to do DOM things just keep this in mind.

$(this)[0] == this

Basically every time you get a set of elements back jQuery turns it into an array. If you know you only have one result, it's going to be in the first element.

$("#myDiv")[0] == document.getElementById("myDiv");

And so on...

Answer 2

Yeah, by using $(this), you enabled jquery functionalities for the object. Just 'this', it only has generic javascript functionalities.

Answer 3

Yes, you need $(this) for jQuery functions, but when you want to access basic javascript methods of the element that don't use jQuery, you can just use this.

Answer 4

$() is the jQuery constructor function.

this is a reference to the DOM element of invocation.

so basically, in $(this), you are just passing the this in $() as a parameter so that you could call jQuery methods and functions.