Jquery - When to use “this” and when to use “$(this)”? [duplicate]

Answer 1

the this object doesn't change. It is the owner of the function. It is, in most cases like this, simply a node and you can reference all of its properties like this.className. (think of it as you would a node or whatnot that you get with document.getElementById). It is just the "owner" of the function.

Therefore, you are just passing the this object to jQuery's $().

Conclusion: If you want to use jQuery functions for the current node, use $(this). But if you want to access the objects own properties (e.g. .name, className, .id), use simply this.

Answer 2

Whether you need $(this) or not depends on the context you're working in.

Need it:

• When handling jQuery Events this is passed as the DOM element that triggered the event $(this) turns DOM element into a jQuery object

• Anytime you get a DOM element Other instances where you have a DOM element (or an object) and want to turn it into a jQuery object

Don't need it:

• Inside of a jQuery Plug-in jQuery plug-in (jquery.fn) function this is a jQuery object already so no need to apply $(this) in here.

No harm done in $(this) even if this is a jQuery object because jQuery will just return the same object.

Answer 3

this in jQuery generally points to a DOM element, such as HTMLSelectElement.

Rewrapping it with the jQuery function allows you to call jQuery methods on it.

Answer 4

$( ".class" ).click( function () {

  $( this ).load( "/path/to/file.html" );

} );

In this example, this is referring to the .class div and would load the contents of file.html into said div when you clicked on it.

So click on .class, file.html gets loaded into it.

Answer 5

Putting this inside $() turns this into a jquery object, with the ability to have all the typical jQuery methods called on it. this by itself it just a normal javascript reference to a given object/element.

Answer 6

this is for javascript, $(this) for jQuery. you can use $(this) for every functions of jQuery, not the case for this.

Edit: For your example the i is just the incremented number that he is on (0 the 1st 10 the 11the) the $(this) is the element img precisely you can do either :

$(this).on('click', function() { console.log(123); });
or
$('img').eq(i).on('click', function() { console.log(123); });

Edit2: Here is a usage of this:

var sorter = {
    sort: function() {
        console.log('sorting');
    },
    requestSorting: function() {
        this.sort();
    }
}
sorter.requestSorting.bind(sorter);

In this example it's exactly used like the $this in PHP class. That's why I said it's more for pure javascript functions.