mpcache

HTML

<div class="myclass myclass-1">Div 1</div>
<div class="myclass myclass-2">Div 2</div>
<div class="myclass myclass-3">Div 3</div>
<div class="myclass myclass-4">Div 4</div>
<div class="myclass myclass-5">Div 5</div>

<div class="results">Results</div>

<button id="requery">reselect</button>

CSS

.myclass {
    height:30px;
    background-color:#ccc;
    border:1px solid #888;
}
.results {
    height:40px; 
    background-color:red;
    color:white;
    border:1px solid white; 
    padding:5px;
    margin-top:20px;
}

JavaScript

(function(window, $, undefined){
  // code here..
  var mp = {};
  mp.cache = [];
  mp.get = function ( selector, force) {
    return ( !force || !mp.cache[ selector ] ) ? mp.cache[ selector ] = $( selector ) : mp.cache[ selector ];
  }
  window.mp = mp;
  window.$$ = mp.get;

})(window, jQuery);

$(function(){
   
    function runOnload() {
        var mc = $$('.myclass');
        $$('.results').text('There are ' + mc.length + ' divs with myclass');
    }
   
    $('#requery').on('click', function() {
        /* this call will return the results from the cache */
        var str1 = $$('.myclass').length + ' - compare from cache - ';
        str1 += mp.cache['.myclass'].length;
        $$('.results').text( str1 );
        /* all of these will return the exact same */
        //console.log($('.myclass'));
        //console.log($$('.myclass'));
        //console.log(mp.cache['.myclass']);
    }); 

    runOnload();    

});