1

Example:

$("#footer-create-nav li").click(function () {
    var $this = $(this);
    $this.addClass('footer-create-active');
    $this.siblings().removeClass('footer-create-active');
    return false;
}

vs how alot of my code looks:

$("#footer-create-nav li").click(function () {
    $(this).addClass('footer-create-active');
    $(this).siblings().removeClass('footer-create-active');
    return false;
}
captainill
  • 2,049
  • 4
  • 17
  • 21
  • I don't see any advantage or disadvantage either way. ;) – Paul Manta Jun 11 '11 at 20:40
  • I realise this may be a simplified example, but I'd suggest using chaining (`$(this).addClass('footer-create-active').siblings().removeClass('footer-create-active')`) or [`end()`](http://api.jquery.com/end): `$(this).addClass('footer-create-active').end().siblings().removeClass('footer-create-active');`. – David Thomas Jun 11 '11 at 20:41
  • 1
    Maybe. The question is does jQuery have to create a new object every time you have $(this) and can you save some CPU time by creating it once and referencing it as $this. My guess is that it's probably a little better to do $this, but I don't know for sure. – AndrewR Jun 11 '11 at 20:43
  • @David the `.end()` there in the second example has no effect – nickf Jun 11 '11 at 20:44
  • @nickf: in that example, no it doesn't. Hm. Perhaps not the greatest example then..? Sigh. – David Thomas Jun 11 '11 at 20:48
  • This is a simple example and chaining sounds like a good option here but more generally it sounds like local variable caching is the way to handle most cases @Anurag's. Does jquery have some kind of internal caching though? – captainill Jun 11 '11 at 20:57

4 Answers4

5

It is a good practice to avoid recreating a jQuery object multiple times.

this represents a DOM object, and when passed to the $ or jQuery function, a new jQuery object is created every single time. Caching that object once in $this or any other variable name of your liking avoids having to recreate the object on each invocation of $(this). The benefits of this caching may depend on how many times you are calling $(this) and may be unnoticeable in most cases.

To get a better idea, test it out for yourselves.

Anurag
  • 140,337
  • 36
  • 221
  • 257
2

You have another option. jQuery methods return the object they're operating on.

$(this).addClass("example")

would return the value of $(this).

So you could write your function as

$("#footer-create-nav li").click(function () {
    $(this).addClass('footer-create-active')
           .siblings().removeClass('footer-create-active');
    return false;
}

and only refer to this once without using another variable.

See Also

Community
  • 1
  • 1
Jeremy
  • 1
  • 85
  • 340
  • 366
  • `$(this).addClass("example") == $(this)` will never be true as a new jQuery object is returned every time. More generally, `$(this) == $(this)` will always be false. – Anurag Jun 11 '11 at 20:46
0

Probably not. To put things in perspective, if a user triggered that function (by clicking) a thousand times on a single page, the speedup might balance out the additional download time incurred by the additional 20 bytes of JS code.

If you were doing a complex selector lookup in a tight loop, caching the result might be worthwhile. It definitely isn't in this case, though.

  • I totally disagree. Firstly, you miscalculated by not taking all optimisations into account: Let's consider the following two variations: `$(this)...;$(this)...;` vs. `var t=$(this);t...;t...;`, the weight difference is not 20 bytes, but 2 bytes. That's a packed version of the OP's proposal. Secondly, if there are already local variables being created, then we don't need to consider `var `, so now the code is actually **shorter** in the cached version. And if there are more than just two references, then it becomes even shorter... So the cached version is shorter and faster. – davin Jun 11 '11 at 21:25
0

I can't explain it, but this jsperf appears to show that it is better to call $(this) each time...

http://jsperf.com/jquery-this-vs-this-vs-chain

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • I can explain it. Profile those executions. The **vast** majority of processing time is being spent on styling, which throws any difference in object access time out the window. – davin Jun 11 '11 at 21:37
  • @davin, `$(this)` is always going to be a tiny fraction of the execution time, but why is re-creating it always coming up considerably faster? Thinking maybe it's something to do with which one runs first, maybe re-ordering the cases will change it. – James Montagne Jun 11 '11 at 21:40
  • @davin yeah, seems whichever case is first always comes out fastest, not sure why, but this test is pointless! – James Montagne Jun 11 '11 at 21:46