Search jQuery

jQuery Forum

Using jQuery

mhulse

Would like some clarification on using $(this) (code example provided)

in Using jQuery • 10 years ago

Hello,

Here's a funky demo page.

Here's my funky code:

$(document).ready(function() {
var $this = $(this),
$dog = $('#dog'),
billy = function(num) {
console.log('(billy ' + num + ')', 'this:', this, '$this:', $this, '$dog:', $dog);
};
billy(1);
$('#clickme').click(function() {
console.log('(1)', 'this:', this, '$this:', $this, '$dog:', $dog);
var $this = $(this);
console.log('(2)', 'this:', this, '$this:', $this, '$dog:', $dog);
$('#what').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 500, function() {
console.log('(3)', 'this:', this, '$this:', $this, '$dog:', $dog);
var $this = $(this);
console.log('(4)', 'this:', this, '$this:', $this, '$dog:', $dog);
});
billy(2);
});
});

My question(s):

When I have nested closures/functions/other, where each has its own "this", should I be worried about re-defining "var $this = $(this)"?

In other words, when you need to create a cached version of $(this), and there's multiple nested levels of closures and functions, is it best practice to use different variable names for $(this)? Like $this1, $this2, $this3 (and so on).

Sorry if noob question. I was just working on some code recently where I was using the same variable name for all my "this" (i.e. $this = $(this)) and that got me worried that maybe doing so would cause some strange bugs in my code down the road.

Anyone know of any articles that cover this (I found some articles on jquery and this, but nothing that covered my exact question above). Does anyone have a rule of thumb for handling multiple levels of "this"?

TIA!

Cheers,
M

Replies(4)

Kevin B

Re: Would like some clarification on using $(this) (code example provided)

10 years ago

Just define it when you need it. The only best practice with $(this) is to avoid using $(this) over and over.

If you only use $(this) once, there's no need to cache it in $this

-- Kevin

mhulse

Re: Re: Would like some clarification on using $(this) (code example provided)

10 years ago

Thanks for the quick reply and tips Kevin, I really appreciate it! :)

I definitely agree with the tips you mention and have been following those rules for a little while now.

My main concern is, if I do cache "this" in a "$this" variable, are there situations where I might run into collisions with nested functions, like animate(), on(), click(), other() if they're using the same named variable to cache $(this)?

I'm probably over-thinking things here. :D

Quick question related to my code:

On lines #17 and #31, why does $this return undefined? Shouldn't the $this from lines #3 and #19 be accessible at that point, just like the $dog variable is? Why didn't the "this" from lines #3 and #19 not get cached for the scopes of the nested functions/callbacks? Did the reference/cache "this" somehow get redefined to "undefined" when I jumped into the click()'s and animate()'s closures?

Here's the output from Firebug's console:

(billy 1) this: Window 2 $this: jQuery(Document 2) $dog: jQuery(p#dog)
(1) this:<button id="clickme">$this: undefined$dog:jQuery(p#dog)
(2) this: <button id="clickme"> $this: jQuery(button#clickme) $dog: jQuery(p#dog)
(billy 2) this: Window 2 $this: jQuery(Document 2) $dog: jQuery(p#dog)
(3) this: <div id="what" style="opacity: 0.25; left: 50px; display: none;"> $this: undefined $dog: jQuery(p#dog)
(4) this: <div id="what" style="opacity: 0.25; left: 50px; display: none;"> $this: jQuery(div#what) $dog: jQuery(p#dog)

Thanks so much for your help! Sorry if n00bie questions. :)

mhulse

Re: Would like some clarification on using $(this) (code example provided)

10 years ago

Interesting, when I add:

var $this = $(this),
var el = this;
$('#foo').slideUp(function() {
console.log('el:', el, 'this:', this, '$this:', $this);
});

Console returns:

el: Document index.html this: <div id="foo" style="display: none;"> $this: jQuery(Document index.html)

Going back to my original code, why do click() and animate() return "undefined" for the parent-level cached "this"?

Also, isn't this example of where re-defining $this (within the slideUp()) could stomp on the parent level $this?

Updated code example:

$(document).ready(function() {
var $this = $(this),
$dog = $('#dog'),
billy = function(num) {
console.log('(billy ' + num + ')', 'this:', this, '$this:', $this, '$dog:', $dog);
};
billy(1);
$('#clickme').click(function() {
console.log('(1)', 'this:', this, '$this:', $this, '$dog:', $dog);
var $this = $(this);
console.log('(2)', 'this:', this, '$this:', $this, '$dog:', $dog);
$('#what').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 500, function() {
console.log('(3)', 'this:', this, '$this:', $this, '$dog:', $dog);
var $this = $(this);
console.log('(4)', 'this:', this, '$this:', $this, '$dog:', $dog);
});
billy(2);
});
var el = this;
$('#foo').slideUp(function() {
console.log('el:', el, 'this:', this, '$this:', $this);
});
});

... and the console:

(billy 1) this: Window index.html $this: jQuery(Document index.html) $dog: jQuery(p#dog) index.html (line 51)
el: Document index.html this: <div id="foo" style="display: none;"> $this: jQuery(Document index.html) index.html (line 89)
(1) this: <button id="clickme"> $this: undefined $dog: jQuery(p#dog) index.html (line 59)
(2) this: <button id="clickme"> $this: jQuery(button#clickme) $dog: jQuery(p#dog) index.html (line 63)
(billy 2) this: Window index.html $this: jQuery(Document index.html) $dog: jQuery(p#dog) index.html (line 51)
(3) this: <div id="what" style="opacity: 0.25; left: 50px; display: none;"> $this: undefined $dog: jQuery(p#dog) index.html (line 73)
(4) this: <div id="what" style="opacity: 0.25; left: 50px; display: none;"> $this: jQuery(div#what) $dog: jQuery(p#dog)

mhulse

Re: Re: Would like some clarification on using $(this) (code example provided)

10 years ago

For future reference, I've asked the same/similar question here:

jQuery and “this” management? How to avoid variable collisions?

Thanks again for the help Kevin, I really appreciate it. :)

Top Reply

Response title

Attachments

jQuery Forum

Would like some clarification on using $(this) (code example provided)

Replies(4)

Re: Would like some clarification on using $(this) (code example provided)

Re: Re: Would like some clarification on using $(this) (code example provided)

Re: Would like some clarification on using $(this) (code example provided)

Re: Re: Would like some clarification on using $(this) (code example provided)

Statistics

Tags

Actions