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.

25 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.
Alejandro August 21st, 2008 at 2:22 pm
You can still use this type of code which can use the element's "this", however you still need an id:
```
<img src='foo.gif' id='foo' onclick="$('#'+this.id).toggleClass('bar');" />
```
Ódýr vefhýsing September 30th, 2008 at 10:47 am

This was a very useful article. It definitely clears up the weird and changing jQuery behavior of the keyword 'this' in callback functions and own jQuery functions. Thank you! Ódýr Vefhýsing.
Luke September 30th, 2008 at 3:52 pm

Thanks Remy. A simple article but just what I needed to get started with jQuery!
Sashirekha October 5th, 2008 at 9:08 am

Thanks Buddy, you have saved my time. I was mucking around with 'this' problem inside a jQuery function. Thanks alot.
Christoph October 7th, 2008 at 11:57 am
Hello,

sorry, but simply cant get this to work. I have a couple of DIV´s with class ".day_group", within these div´s one -heading and one -list that is by default hidden. What I am trying to do is to make the -list to show when you click the - but only in this -section.

I tried this, but this opens all -lists, of course. Tried with "this", but no go. Pls, anbody help. Thx!
```
$(function() {
  $(".day_group h2").click(
    function () {
      $(".the_list").show();
      alert ("mau");
    }
  );
});
```
Jason Judge December 3rd, 2008 at 6:00 pm

$('foo') is an array of matched elements, as you say, but what about when no elements match? If I call $().myPlugin(), what kind of object is 'this' in the myPlugin function?

I'm asking because I am trying to detect that situation happening from within my plugin, but I cannot for the life of me see how to test for that. My guess is that 'this' is an empty jQuery object, but how would I test for that? How would my plugin be able to tell whether it was called up using $().myPlugin() or $('foo').myPlugin()?

It this boils down to this problem: how can I tell whether a jQuery object (which I believe is what 'this' always will be), inside my plugin function, has matched any elements or not?

Thanks!
Jason Judge December 3rd, 2008 at 6:22 pm

Regarding my question, I think I have found the answer (is it not always the case when posting a question, that the answer is discovered?):

The three instances I wanted to detect, along with the condition to detect them, are:

1. $().myPlugin()
this.length == 1 && this[0].nodeName == '#document'

2. $('#invalid-selector').myPlugin()
this.length == 0

3. $('#valid-selector').myPlugin()
this.length > 1 || (this.length == 1 && this[0].nodeName != '#document')

Hope that helps someone! Sorry if it is not *entirely* relevant to the original post.
subbarao December 31st, 2008 at 6:26 am

this;
$(this)
can u tell me the returning object in these cases
Cody Schneider January 23rd, 2009 at 3:47 pm

I was having the same problem as Tyson, and had spent hours trying to find a solution. I'm in the process of writing my first decent sized OOP application, and I was tearing out my hair trying to figure out why 'this' wasn't doing what it should within the jQuery ajax method. Thanks for a great post.
Thomas Wessel March 27th, 2009 at 2:16 am

Jepp, as Tyler and Cody it fixed my problem when using colorpicker plugin on several input fields. (If you try my site don't hang me for the jquery design i'm borrowing while developing. Its just a very bad wysiwyg website generator )
Jan Buschtöns April 3rd, 2009 at 8:48 pm
Hey thank you, but I can't use your solution in this Script.
```
$("div.links a").replaceWith("");
```
As href I'll get 'undefined'. What can I do? Thank you very much!

//edit: Just I've found a Solution:
```
$("div.links a").each(function() {
  $(this).replaceWith("<iframe src="" + $(this).attr("href") + ""></iframe>");
});
```