title: jQuery global selection "cache"
body: <p>I don't think I'm the first one to run into this issue but I haven't find a way to search for this without getting results that have nothing to do with the issue.</p>
  
  <p>I adopted the not so extended good practice of "caching" repetitive jQuery selections into vars like <code>var element = $('#element');</code> to prevent "DOM pool searching" for every repeated use of the element</p>
  
  <p>The problem I'm having is that now I'm doing this caching inside a function. Something like:</p>
  
  <pre><code>function functionname (id) {
      var id = $('#'+id);
      //extra stuff
  }
  </code></pre>
  
  <p>I'm not expert in variables scopes but I'm not being able to do</p>
  
  <pre><code>functionname ('some-div-id');
  some-div-id.dialog('open');
  </code></pre>
  
  <p>So I'm pretty sure it's because the variable created inside the function is not accesible outside the function itself.</p>
  
  <p>Then I came up with</p>
  
  <pre><code>function functionname (id) {
          window.id = $('#'+id);
          //extra stuff
  }
  </code></pre>
  
  <p>but if I try to do <code>window.some-div-id.dialog('open');</code> I get <code>TypeError: 'undefined' is not a function</code> </p>
  
  <p>What am I missing? I'm sure it's a small dumb thing but I'm missing it just in front of my eyes.</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>Thanks everyone but you're missing something.
  The code suggestions are missing the fact that the inside "global" variable name is dynamic:</p>
  
  <p>var CACHEobject = {};</p>
  
  <pre><code>function doSomething (NAMEHERE) { //note the function parameter 
     CACHEobject.NAMEHERE = $('#'+NAMEHERE);
  }
  </code></pre>
  
  <p>So the idea is that the function creates a javascript variable with the same name that the #element_id. If I pass a name to the function it should select the html id with that name and "cache it" to a global variable with the same name:</p>
  
  <pre><code>doSomething('myDialogOne'); doSomething('myDialogTwo');
  </code></pre>
  
  <p>so I can later do </p>
  
  <pre><code>CACHEobject.myDialogOne.dialog('open'); CACHEobject.myBox.dialog('close');
  </code></pre>