What is the difference between this and $(this) in jQuery

Question

I am new to jquery. I want to know the difference between this and $(this). Suppose i made a function call like this

$.fn.column = function() {

     var $td = this;
     var $td1 = $(this);


}; //end of  $.fn.column = function()

$('#FaqGridForm\\:faqGrid tr td').column();

When i use firebug, then both variables are [td] . So what is the difference between these two ?

possible duplicate of [What is the difference between this and $(this) in jQuery?](http://stackoverflow.com/questions/6965979/what-is-the-difference-between-this-and-this-in-jquery) — KV Prajapati, Jan 17 '12 at 09:46
possible duplicate of [jQuery $(this) vs this](http://stackoverflow.com/questions/1051782/jquery-this-vs-this) — Rory McCrossan, Jan 17 '12 at 09:48
@Dupes, try to find the right duplicates: `this` in the context of a plugin.. — Rob W, Jan 17 '12 at 09:49

score 3 · Accepted Answer · answered Jan 17 '12 at 09:45

3

In a jQuery plugin, this points to the jQuery collection of all matched elements. Using $(this) in this context is obsolete, and discouraged.

In the context of, say, an event handler, this points to the DOM element from which the event is fired. $(this) will wrap the DOM element in a jQuery object, so that jQuery methods are available.

Code examples:

$.fn.plugin = function() { alert(this); };
$('selector').plugin(); //Alerts [object Object] = a jQuery object.

$('body').click(function() {
    alert(this);   // [object HTMLBodyElement]
    alert($(this));// [object Object] (a jQuery object)
});

answered Jan 17 '12 at 09:45

Rob W

341,306
83
791
678

@James Allardice Rory McCrossan. I just found another thing. I am suing code like this `$('#faqGrid tr td').each(function(){var $tdChildrenArray = $(this).children(); var $divChildrenArray = this.children('div');}); ` if i use `var $tdChildrenArray = this.children(); var $divChildrenArray = this.children('div');`, then i get error at after executing the line `var $tdChildrenArray = this.children();`, but if i use `var $tdChildrenArray = $(this).children();`, then there is no error. Why? – Basit Jan 17 '12 at 10:46
@Basit - Because in that case `this` refers to a DOM element, not a jQuery object. See my answer. – James Allardice Jan 17 '12 at 10:50
`this` in jQuery callback will **usually** point to a DOM element, so `this` should be wrapped in a jQuery object. **In a plugin** (such as in your question), `this` always points to the jQuery object with matched the selector on which the `plugin` is invoked. – Rob W Jan 17 '12 at 10:51
1

Hhmmm you people mean when i used this in callback, then **this** refer to simple td, no jQuery object, i cannot use jquery methods on it, but when i used **$(this).children(), then i wrapped my td to jQuery object. Now i can use jQuery methods on it, such as children(). Is it? But in plugin case this behaves like $(td). So i can use simply this.children(). Am i right ? – Basit Jan 17 '12 at 10:58
@Basit Excactely, you get it :) – Rob W Jan 17 '12 at 10:59
@Basit FYI, you can only have one accepted answer on Stack Overflow. Clicking on `Accept answer` at another answer will remove the tick from the previously accepted answer :p – Rob W Jan 17 '12 at 11:07

James Allardice · Answer 2 · 2012-01-17T10:49:13.857

1

In that case, there is no real difference. Since you've extended jQuery, this is already an instance of jQuery and all $(this) does is pass it into jQuery again, which is unnecessary.

However, in cases like this:

$("#someElem").click(function() {
    //this is now a reference to a DOM element:
    console.log(this instanceof jQuery); //false
    console.log(this.val()); //TypeError
});

You often need to pass this into jQuery so you can use jQuery methods on it:

$("#someElem").click(function() {
    console.log($(this) instanceof jQuery); //true
    console.log($(this).val()); //Prints value
});

edited Jan 17 '12 at 10:49

answered Jan 17 '12 at 09:45

James Allardice

164,175
21
332
312

In your second example, `this` should be `$(this)`. – Rob W Jan 17 '12 at 10:48

score 0 · Answer 3 · answered Jan 17 '12 at 09:45

this is the native DOM element in question. You can use the full gamut of DOM methods on it.

$(this) is the native DOM element wrapped in a jQuery object, and as such you can access all the functions jQuery provides in it's framework to amend the element as you require. You can also access the DOM element itself via the jquery object by using:

$("#myElement")[0]

Update

This obviously applies to writing jQuery in external functions. Rob W is correct in that your example uses a plugin, therefore this would refer to a jQuery object containing an element.

What is the difference between this and $(this) in jQuery

3 Answers3