What is this? » Learning jQuery - Tips, Techniques, Tutorials

clueTip Plugin Beta 2

Clearing Form Data

Aug

05

2007

What is this?

read 15 comments

One of the most confusing aspects of jQuery is how it assigns scope during callbacks. It must be confusing because the topic generates a lot of questions on the mailing list. It's too bad, really, because jQuery sets the scope in order to simplify your code, not make it more confusing.

So here are some pointers that may help you remember what this is.

`this` is a DOM element

When is this a DOM element? The short answer is - usually. Scripting with jQuery quite often involves the use of callback functions. Whether handling an event, iterating a collection of nodes, animating an image, or applying a dynamic filter, callbacks are used to invoke your custom code at the appropriate time. To make things easy for you, jQuery sets the scope of the callback function to the element which is the subject of the callback. For example, when we want to handle a mouse click event for an element we bind a handler function to the event like so:

JavaScript:

$('#myButton').bind('click', function() {
    // our code to handle the click event goes
    // here, in the callback function
});

When a user clicks the 'myButton' element, jQuery invokes the callback function that was passed to the bind method. But when it invokes our callback it sets the current scope to the DOM element that initiated the event, in this case the 'myButton' element. jQuery does this as a convenience. The object you are most likely to need in the event callback is the element that triggered the event. And what easier way to have access to it than by using the this keyword? So within the callback function it can be assumed that this is the relevant DOM element:

JavaScript:

$('#myButton').bind('click', function() {
    // 'this' is the DOM element that triggered the event
    alert(this.id == 'myButton');
});

Let's look at how often this is a DOM element when using jQuery. We just saw the case of an event handler; here are a few more:

Iterating elements with the each method:

JavaScript:

$('div').each(function() {
    // 'this' is a DOM element
    alert(this.tagName.toLowerCase() == 'div');
});

Using the load AJAX method:

JavaScript:

$('#myDiv').load('myUrl.php', function() {
    // this is the DOM element
    alert(this.id == 'myDiv');
});

Using animation:

JavaScript:

$('#myDiv').fadeOut('slow', function() {
    // this is the DOM element
    alert(this.id == 'myDiv');
});

Using selection filters:

JavaScript:

var set = $('div').filter(function() {
    // this is the DOM element
    alert(this.tagName.toLowerCase() == 'div');
    return true;
});

Using the "document ready" construct:

JavaScript:

$(document).ready(function() {
    // 'this' is the document object
    alert(this === document);
});

Using global AJAX events:

JavaScript:

$().ajaxStart(function() {
    // 'this' is the document object
    alert(this === document);
});

This last one may confuse you. Why is this the document object in the ajaxStart callback? The methods that wire your callbacks to the global AJAX events are binding methods. They bind your event handler to a DOM element. When the event occurs, your handler is called within the context of the DOM element(s). And when you use the dollar function with no arguments jQuery implicitly uses the document object as the selected element. So another way of writing the previous code snippet is:

JavaScript:

$(document).bind('ajaxStart', function() {
    alert(this == document);
});

Now you can probably see how this is determined by how you call the AJAX binding methods:

JavaScript:

$(window).ajaxStart(function() {
    alert(this == window);
});
$('#busyIndicator').ajaxStop(function() {
    alert(this.id == 'busyIndicator');
});
$('div.error').ajaxError(function() {
    alert(this.tagName.toLowerCase() == 'div');
});

`this` is an Object

I mentioned earlier that when iterating elements with jQuery's each iterator, this is always a DOM element. Technically, it is more accurate to say that within an each iteration, this is the subject of the current iteration loop. This distinction is important because jQuery's each method can be used to iterate over any array-like object, not just nodeLists.

JavaScript:

var arr = ['a','b','c'];
$.each(arr, function(index, obj) {
    // 'this' is the object of the current iteration
    alert(this.constructor == String);
    alert(arr[index] == this);
    alert(this == obj);
});
// or using a different but functionally equivalent syntax:
$(arr).each(function(index, obj) {
    // 'this' is the object of the current iteration
    alert(this.constructor == String);
    alert(arr[index] == this);
    alert(this == obj);
});

`this` is a jQuery Object

Plugin authors take note! If you've authored a plugin whose functionality can be applied to many elements, then you've most likely done so using the standard fn extension:

JavaScript:

$.fn.myPlugin = function() {
    // your plugin code goes here!
});

Within your plugin function this is the jQuery object. And if you respect the Plugin Authoring Guidelines, your plugin method will always return this in order to maintain Chainability.

JavaScript:

$.fn.myPlugin = function() {
    // this is the jQuery object
    alert("jQuery version: " + this.jquery);
    return this;
});

Typically, a plugin will operate on every DOM element that has been selected by the jQuery object. In a nutshell, this means using the each method within your plugin. You'll often find this technique implemented as follows:

JavaScript:

$.fn.myPlugin = function() {
    // this is the jQuery object
    alert("jQuery version: " + this.jquery);
    return this.each(function() {
        // this is now the DOM element that is
        // the subject of the 'each' iteration
        alert("current element: " + this.tagName);
    });
});

`this` is an AJAX settings Object

I talked earlier about about jQuery's load method and the global AJAX callbacks. Those callbacks are specifically bound to a DOM element or set of elements. The rest of the AJAX methods, $.get, $.post,$.ajax, etc, operate outside the context of a specific element set. But these methods can all be passed callback functions so it's important to understandwhat this is in those callbacks. Fortunately, all you need to remember is that for each of the local AJAX callback functions, beforeSend, success, complete, and error, this is always equal to the settings object used for the AJAX call.

JavaScript:

$.get('myUrl', function() {
    // 'this' is the AJAX settings object used by the get call
    alert(this.url == 'myUrl');
});
$.ajax({
    type:   'POST',
    url:    'myUrl',
    timeout: 5000,
    beforeSend:  function() {
        alert(this.url == 'myUrl');
    },
    error: function() {
        alert(this.timeout == 5000);
    },
    success:  function() {
        alert(this.type == 'POST');
    },
    complete:  function() {
        alert(this.async == true);
    }
});

Converting `this` to `$this`

When this is a DOM element it is often in the context of code that needs to access or manipulate it in some way. This, of course, is something that jQuery excels at. So how do we use the power of the jQuery API when this is a DOM element? Just turn this into $this:

JavaScript:

$('div').each(function() {
    // 'this' is a DOM element
    // wrap 'this' in a jQuery object
    var $this = $(this);
    // now we have the full jQuery API at our disposal
    var title = $this.attr("title");
    if (title != null)
        $this.prepend("
<h2>" + title + "</h2>
<p>");
});

When in Doubt

When you're confused about what this is within a given code block, ask yourself, "What makes the most sense here?" More often than not, the answer to that question is equal to this.

Scripts Used on This Site

comment feed

15 comments

chali

August 6, 2007 at 9:25 am

Excelent, excelent, excelent post. 'This' is great for begginers like me :)
Thanks!

Reply
tom armitage

August 6, 2007 at 11:53 am

Aha - that came a fraction too late for me. I ended up writing a blogpost about my discovery of what this means, and where, which I found out the hard way. Still, this article looks great too - thanks for being so comprehensive.

Reply
Bill Warters

August 14, 2007 at 2:18 am

Hi there. I got interested in trying out jQuery after seeing your session at the Grandrapids BarCamp. Right now, however, I'm stumped trying to get my selectors straight...I guess this is just not what it seems.

Briefly, I've got a blog setup I'm building that I'd like to add an "Add to favorites" feature to. I can submit the query and get back the data string I'm looking for, but I can't figure out how to select the span that my trigger link resides within so that I can replace it's html with the returned data.

Sample blog html snippet
<h2>A Sample Posting to the Blog</h2> <p class="postedby">Posted by <a href="/forums/member/1/">Fred</a> on Aug 03, 2007 <span class="favorites_span" id="favorite_1750"> <a class="Favorites_Trigger" id="1750" href="/forms/favorite-add/1750">Add to favorites?</a> </span> </p> <p>Here is a sample posting in the blog. This could be written by an expert in the area. </p>

And here's the bit of Jquery code that I can't quite get to replace my favorites span contents.
<script type="text/javascript" src="includes/jquery"></script> <script type="text/javascript"> $().ready(function() { $('a.Favorites_Trigger') .click (function() { var itemid = this.id; $.get(this.href, function(data) { var myresponse = data; var spanid = "favorite_" + itemid; alert(data); }); return false; }); }); </script>

Should I be trying to get the parent of my trigger link, and if so, how do I get there from "this"?
As you can see, I can even construct the unique span id I'm looking for based on the link id, but my javascript skills are not up to the task of using this variable correctly in a jquery select statement.
Any help would be much appreciated...

Reply
Bill Warters

August 14, 2007 at 2:44 pm

Oops, I thought Karl posted this...I don't recall Mike being at BarCamp GrandRapids.

Reply
Bill Warters

August 14, 2007 at 5:02 pm

Got it sorted...Here's the selector I needed, placed in the code where the alert now sits.
$("span#"+spanid+".favorites_span").html(data);

Reply
Jeroen Coumans

August 30, 2007 at 5:31 am

Like Bill, I'm also having trouble combining this and/or $(this) with selectors. A future blog post exploring this topic would be greatly appreciated for us beginners! :-)

Reply
Mike Alsup

August 30, 2007 at 8:46 am

Jeroen, $this is just a naming convention used by many jQuery developers. It helps you remember that the variable is a jQuery object rather than a DOM element (assuming you're following the convention). For example:
$('#myButton').click(function() { // in the event handler 'this' is a DOM element alert (this.id == 'myButton');
// wrap this in a jQuery object so we can use the jQuery API var $this = $(this);
// now we have this and $this to play with alert( $this.attr('id') == 'myButton'); });

Reply
Tyson

September 2, 2007 at 3:42 pm

When you call Jquery from within function in a custom Javascript class, how do you refer to the containing object in the Jquery callback function since Jquery uses "this" to refer to the DOM object in the callback function?

Reply
Carter

September 6, 2007 at 6:44 pm

Tyson (and anyone else searching this),
This is how I've been doing it:
```
$(".button").bind("click", {that:this}, function(event) {
      var that = event.data.that;
      that.handleEvent();
      return false;
});
```
If you pass in an object after the binding event type arg ("click") it get's tacked onto the event's "data" property. I've been looking for a nicer way to do this... just posted in the google groups forum. Prototype has a bindAsEventListener method that you can tack onto any function to let you say what you want "this" to reference inside the function.

Hope this helps,
Carter

Reply
Mike Alsup

September 14, 2007 at 8:24 pm

@Tyson: You just need to create a closure to capture the object you need to reference in the callback. For example:
... var self = this; $('#myElement').click(function() { // here you can use 'self' to reference // the enclosing object }); ...

Reply
stefan

March 6, 2008 at 5:42 am

hello , i am trying to use the jQuery load() function , i am using it like this $("#mydiv").load("myfile.php?argument=x");
all works fine untill i want to process the results returned by the function , meaning that the file myfile.php prints some parts of an form based on some arguments received , the problem is that when i want to process the values of the form elements i cannot because it hasn't generated any html code for them , you can see the problem at http://www.potirnel.8k.ro/formular2/ , any help is great. potirnel@yahoo.com

Reply
Raimund

April 4, 2008 at 5:51 am

how do i get the received content of the ajax-/get-function to the div element again ?

thanks...
raimund

Reply
Brijesh Kumar Sharma

January 5, 2009 at 7:20 am

your live comment preview is meaning less. why are you giving fullish type of live comment.
when we type then we can see what i type.

Reply
Brijesh Kumar Sharma

January 5, 2009 at 7:22 am

what the hell u r doing in coding. how i know that my comment is saved. no any message prompt.

Reply
Kevin

April 19, 2009 at 2:21 pm

This is sweet and so so helpful.

Regarding the solution in #10 (which worked perfectly) - is there no other way to bind than this solution? It works but seems inelegant... I wish I could just bind on the function somehow. Ah well! Thanks for this very useful post

Reply

One Ping

A Simple jQuery Slideshow | Jon Raasch's Blog

May 10, 2009 at 6:39 pm

[...] of the new image to 0 so that we can fade it in using the animate() function. Finally, we attach a callback to remove the z-index classes from the previous image when animate() [...]

Leave a Comment

What Is This?

Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. We have tutorials for all skill levels, and each entry is categorized by level of difficulty.

Support the jQuery Project

If you or your organization have benefitted from the use of jQuery, please consider donating to John Resig and the jQuery project.

Pages

RSS

Creative Commons License

© Copyright 2006–2009 Learning jQuery and participating authors. Written content on this site is under a Creative Commons License.

Development by Karl Swedberg. Design by Rex Rainey. Published with WordPress.