Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 3

Jeremiah Lugtu
Jeremiah Lugtu
9,910 Points

what did he mean by "it just stops jQuery selecting it again"?

at 6:20-6:32

he said we could use $(this), or $overlay since we saved it in a variable."It just stops jQuery selecting it again"

what does it mean?

What's the difference in this example? and the difference with the previous section of using $(this) instead of $button in the spoiler reveal section?

suppose you are making an click event that element in which you assign click event will be considered as a $(this) inside a function

1 Answer

Hani Shawa
Hani Shawa
10,008 Points

This link provides a decent explanation of why we create and use a variable like $overlay rather than $(this), and I'm including the most relevant passage below.

Selector Caching in jQuery

"The worst offender is the way developers handle jQuery selectors. Most commonly, I see things like $( this ) repeated several times within a callback function. Or $( '#selector' ) used throughout a script to both bind and unbind multiple events.

What new developers don’t realize is that every call to $( something } asks jQuery to rescan for the matching element, wrap it in a jQuery object, and create a new instance of something you already have in memory. If your code crashes due to memory cascades, overuse of redundant selectors might be related"


Everytime we use a selector such $("p") or use $(this), jQuery is having to do more work to traverse the DOM and find what we're referring to. In particular if we're going to keep selecting the same thing over and over again throughout our code, this would hinder performance and be inefficient.

So, by caching our selectors as we've done with $overlay, we've stored this as a jQuery object that can be easily and quickly referenced to, is great for reusabililty, and means that jQuery does not have to perform more work of scanning through the DOM and finding our selector.

So when Andrew mentions "it stops jQuery selecting again", he's basically saying that jQuery is not having to perform the extra work in scanning through the DOM and finding the selector we refer to.

Another decent link below that provides a better answer to the benefits of selector caching:

Why Cache jQuery Objects

Thank you so much, Hani! I was wondering myself, and that was an excellent and thorough answer.

Hani, thank you for your thoughtful and detailed explanation!