mzax5q
Last Updated: September 17, 2016
·
5.137K
· moak
Picture of me 8

Don't overuse $(this)

If you're going to access the $(this) a lot, you might want to consider storing it into a local variable. So instead of something like this:

$('.items').each(function() {
    var pos = $(this).offset();
    var prevFloat = $(this).css('float');
    var prevZIndex = $(this).css('z-index');
    $(this).fadeOut();
    ...

You might want to consider changing your code to something more like this

$('.items').each(function() {
    var $this = $(this),
    pos = $this.offset(),
    prevFloat = $this.css('float'),
    prevZIndex = $this.css('z-index');
    $this.fadeOut();
    ...

This will increase performance speed so you don't need to repeatedly create new jQuery objects

And as brombomb mentioned using $ infront of the variable name denotes that it's already a jQuery object

Say Thanks
Respond

14 Responses
Add your response

153
546cb399441344941ff1052fae9563b4

I've done this for years. Why haven't I come up with the idea of writing this protip?

over 1 year ago ·
158
Picture of me 8

@hannesg I didn't even check if someone else previously posted it, I just keep running into this on open source projects, I was thinking it was worth mentioning again

over 1 year ago ·
159
04b056e843c7f0e4c7e97e36174e43b4

Great tip, but it can very well apply to all look-ups. If you're repeating the same selector on every line, just cache it on a variable and reuse the object returned the first time.

over 1 year ago ·
160
190043 533696520020804 1840519452 n

Also don't overuse var keyword ;)

var $this = $(this),
pos = $this.offset(),
prevFloat = $this.css('float'),
prevZIndex = $this.css('z-index');

over 1 year ago ·
162
Picture of me 8

@idered hehe, true, I copy pasted this code directly from a jQuery plugin to make my point.

over 1 year ago ·
168

Also worth noting the idea of adding the $ to this to denote it is already a jquery object.

over 1 year ago ·
169
529a291a6eb6205d850ac47d2c38b24c

I'd say this is a rather micro-optimization.
http://jsperf.com/jquery-this-caching

over 1 year ago ·
175

Don't overuse $(this), but do understand this and what it scopes to when you do use it :)

over 1 year ago ·
844
5759b6735ee2cd8f7fb2697ec59ace1d

boys you optimization is funny. read how real men optimize http://msdn.microsoft.com/en-us/magazine/gg622887.aspx

over 1 year ago ·
1715
5728955f444a62bbba61ba09690c50ab

@leoj3n in JavaScript (unlike PHP) the $ sign is an ordinary symbol when used in a variable name, just like a letter or an underscore. It doesn’t change anything as far as the interpreter is concerned. For programmers, it can be a useful way to identify variables that hold jQuery objects, like @brombomb mentioned.

over 1 year ago ·
2439

@francisc I think you're example test it too simple. Of course it's not going to matter in an example where there is only one element the DOM. When you use $(this) it starts from the root node and then checks every node until it finds the given selector. In a real world scenario the lookups could become more expensive.

over 1 year ago ·
2461
2edd809f45e37c99eefbd6e7c969b52a

This applies to everything that involves repetition. It's called the DRY (Don't Repeat Yourself) principle.

over 1 year ago ·
4245
Screen shot 2016 02 29 at 20.33.18

measure things before you say what exactly optimised and how much it is

over 1 year ago ·
4293
Pppp

@lublushokolad I like the 'real men' stuff!

over 1 year ago ·