12 Apr

jQuery's this: demystified

More often that not, in my early dabbling with jQuery and more advanced JavaScript, I found I would constantly get confused over the meaning of "this" in jQuery and my own new libraries.

Hopefully this quick guide can help clarify those confusing moments, because once you've got it, it's simple as pie.

What is "this"?

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

Source: http://en.wikipedia.org/wiki/This_(computer_science)

jQuery's this

There are really two main contexts of 'this' in jQuery. The first refers to a to a DOM element, and the second to a jQuery object.

Example of this as a DOM element

'this' is a DOM element when you are inside of a callback function (in the context of jQuery), for example, being called by the click, each, bind, etc. methods.

The following code searches for anchor links with the class of 'newTarget' and sets the 'target' attribute to '_new' (which is a trick to create strict XHTML while still having some links open in a new window).

In this example we are also going to perform a double check to ensure links to the same domain don't open in a new window using the this object.

$('a.newTarget').each(function() { // <- our anonymous callback
  // check the DOM attribute 'host' on this
  if (this.host != window.location.host) {
    // create a jQuery object using the current DOM element
    $(this).attr('target', '_new');
  }
});

Example of this as a jQuery object

'this' is a jQuery object when you are inside your own jQuery functions. Note that the result of a selector query (i.e. $('a') ) is a jQuery object, which is an array of the matched DOM elements (imagine jQuery is an array with bells on).

jQuery.fn.newTarget = function() {
  // 'this' is a jQuery object at this point - with all the jQuery functions

  return this.each(function() { // return so we don't break the chain
    // now we are inside of a jQuery function, the DOM element is the context
    // so 'this' has changed to become a DOM element.

    if (this.host != window.location.host) {
      $(this).attr('target', '_new');
    }
  });
};

Finishing up

This is far from comprehensive, but equally there's very little to the logic. So long as you remember the context of 'this' changes when moving in and out of object methods then you're on your way.

If you're still not sure, get your hands on Firebug and add 'console.log(this)' within your code to interrogate and understand what 'this' is at that point in your code.

If this still doesn't make sense or I've got it terribly wrong - or you're suddenly enlightened, please do let me know - and I'll do my best to help.

14 Responses to “jQuery's this: demystified”

Lukas Vlcek August 22nd, 2007 at 1:14 pm

Thanks for $(this)!
Tyson September 2nd, 2007 at 4:22 am
Great article. I have a persistent problem that maybe you can help with. How do you call Jquery from with a custom Javascript object and reference the object from within the Jquery callback function?

Example:
```
customClass = function () {
     this.doJquery = function (){
         $("element").click(function(){
              this.foo = bar;
              x = this.foo;
          });
     }
}
customObject = new customClass();
customObject.doJquery;
```
How do you pass a reference to the customClass since "this" is replaced by Jquery? I haven't found an answer yet. I haven't even been able to find a single example of code where someone tried to call Jquery from with a custom Javascript object. Am I going about this all wrong?

Blog Author

Remy Sharp September 2nd, 2007 at 9:32 am

@Tyson - your code is fine. The solution is just to cache a copy within your function call.

e.g.

customClass = function () {
     var cc = this;
     this.doJquery = function (){
         $("element").click(function(){
              cc.foo = bar;
              x = cc.foo;
          });
     }
}
customObject = new customClass();
customObject.doJquery;

Allen Freeman October 4th, 2007 at 8:01 pm

Thanks for the code example! You just saved me hours of pain trying to figure out how to use jquery inside of a custom object method.
Fidel Guajardo October 10th, 2007 at 4:22 pm

I quickly read thru your article and I gained a very valuable lesson. I did not know 'this' could change contexts like that. You write very articulately and precise. Thanks a bunch. I wish you the best at whatever u r pursuing.
jian November 11th, 2007 at 4:08 am

great article
i have got a problem
$('.delete').click(function(){
$.post("test2.php",{id:txt},function(){
this...somecode});});
if i want to refer "this" to the element $('.delete'), what shall i do?

Blog Author

Remy Sharp November 11th, 2007 at 6:23 pm

@Jian - you need to cache the element within the click function. e.g.

$('.delete').click(function () {
  var t = this;
  $.post("test2.php", { id : txt }, function () {
    // do something with 't'
  });
});

carlos December 18th, 2007 at 6:51 pm

I tried this but it did not work
$('.delete').click(function () {
var t = this;
$.post("test2.php", { id : txt }, function () {
$(this).html("ready");
});
});
Blog Author Remy Sharp December 19th, 2007 at 11:57 am
@Carlos, I've no idea what you're trying to achieve without any context, but here's a guess:

This code won't act as you expect:
```
$(this).html("ready");
```
Because this isn't what you think it is. Either run the selector again or point it to the right variable, e.g.
```
$('#status').html("ready");
```

Vincent January 17th, 2008 at 4:46 am

Hi, UR artice userful, but I get some probelm, can U help me to fix it ? thanks.

when I user jQuery ajax function.

function xxxx(){}

$.ajax({
   url: get_url,
   type: 'GET',
   dataType: 'xml',
   timeout: otimeout,
   error: this.showerr ,
   success: this.callback
});

xxxx.prototype.callback = function(xml) {

..............
.............
some code over here.....

$(xml).find('item').each(function(){
var item = $(this);
this.markers[i] = this.createMarker(item);
this.map.addOverlay(marker);

Blog Author Remy Sharp January 17th, 2008 at 10:54 am
@Vincent - I'm not sure if your comment cut short or not, but assuming it didn't I would suggest the problems(s) may be here (keeping in mind I don't have much context to go with):

1) Using 'xxxx.prototype.callback' - might be simpler and lighter on the DOM(?) to just use something like:
```
function callback(xml) { ... }
```
2) Since the XML is just data and not functional code, I would expect this:
```
 this.createMarker(item);
```
To break because the XML 'item' node won't have a method called createMarker on it.

I would strongly recommend using [Firebug](http://getfireubg.com) with the 'break on errors' options (in the script tab) turned on.

Good luck.
Last.fm widget | Troy Cawley January 29th, 2008 at 4:39 am

[...] the “this” keyword in javascript (specifically, using the jQuery library–Thanks, Remy Sharp!), I stumbled across his Last.fm “Recent Albums” widget. They also offer this little [...]
Accessing the jQuery DOM in an Ajax callback « Lee Kelleher’s Weblog March 8th, 2008 at 4:15 pm

[...] started to look at the this keyword to see if that would help. Learning jQuery’s What is this? post clarified a lot of my [...]
roberthue June 4th, 2008 at 7:49 pm

As pointed on another comment, this article brings valuable knowledge to those who are starting to 'uncarefully' mix DOM and JQuery. Thanks.

remy sharp's b:log

jQuery's this: demystified

What is "this"?

jQuery's this

Example of this as a DOM element

Example of this as a jQuery object

Finishing up

14 Responses to “jQuery's this: demystified”

Post Meta

Related Posts

Popular Today

Noteworthy