jQuery Selector Cache Plugin

• Extends jQuery to allow for caching of jQuery objects.
• Helps avoiding unnecessary selector lookups or having to use extra variables to store them.
• Supports contexts and cache refreshes.

Based on Justin Sternberg's $-cache-with-find.js.

Why?

Selector lookups are expensive. You should avoid them unless they are needed.

Instead of this:

$("#container .box").css("color", "red");

// somewhere else...
$("#container .box").css("font-weight", "bold");

// somewhere else...
$("#container .box").css("background-color", "yellow");

You should be doing this:

var $containerBox = $("#container .box");
 
$containerBox.css("color", "red");

// somewhere else...
$containerBox.css("font-weight", "bold");

// somewhere else...
$containerBox.css("background-color", "yellow");

With this plugin you don't need the helper variable.

$.q("#container .box").css("color", "red");

// somewhere else...
$.q("#container .box").css("font-weight", "bold");

// somewhere else...
$.q("#container .box").css("background-color", "yellow");

Usage

Include the script in your page after jQuery.

<script src="jquery.selectorcache.js"></script>

Or using the RawGit CDN.

<script src="https://cdn.rawgit.com/nunof07/jquery-selector-cache/v0.1.0/jquery.selectorcache.min.js"></script>

Retrieving elements

The q method mimics jQuery()'s usage as much as possible. Use it to retrieve elements.

If the object is in cache it will be retrieved directly, otherwise it will be saved to cache first.

// query elements and store them in cache
$.q(".container");

Optionally pass a second argument to use as a context.

// use a context by passing a second argument
$.q(".container", ".parent");

// also accepts a jQuery object as a context
$.q(".container", $.q(".parent"));

Refreshing the cache

You can refresh the cache for a particular selector by passing true as the second or third argument.

// refresh cache for a specific selector/context
$.q(".container", true);
$.q(".container", ".parent", true);

Accessing the cache directly

The cache is stored in jQuery. You can access it directly.

Clear the cache by assigning an empty object.

// reset entire cache
$.selectorCache = {};

Manually update the cache.

// save to cache directly
$.selectorCache[".container"] = $(".container");

// access it later
$.selectorCache[".container"];

// or
$.q(".container");

Why q?

Stands for "query". Since it's something that will be used many times throughout the code, I wanted something short.

You can easily replace it with something else by editing the source code.