Question

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.

I adopted the not so extended good practice of “caching” repetitive jQuery selections into vars like var element = $('#element'); to prevent “DOM pool searching” for every repeated use of the element

The problem I’m having is that now I’m doing this caching inside a function. Something like:

function functionname (id) {
    var id = $('#'+id);
    //extra stuff
}

I’m not expert in variables scopes but I’m not being able to do

functionname ('some-div-id');
some-div-id.dialog('open');

So I’m pretty sure it’s because the variable created inside the function is not accesible outside the function itself.

Then I came up with

function functionname (id) {
        window.id = $('#'+id);
        //extra stuff
}

but if I try to do window.some-div-id.dialog('open'); I get TypeError: 'undefined' is not a function

What am I missing? I’m sure it’s a small dumb thing but I’m missing it just in front of my eyes.

Thanks

---

EDIT

Thanks everyone but you’re missing something.
The code suggestions are missing the fact that the inside “global” variable name is dynamic:

var CACHEobject = {};

function doSomething (NAMEHERE) { //note the function parameter 
   CACHEobject.NAMEHERE = $('#'+NAMEHERE);
}

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:

doSomething('myDialogOne'); doSomething('myDialogTwo');

so I can later do

CACHEobject.myDialogOne.dialog('open'); CACHEobject.myBox.dialog('close');

Answer 1

This is what you want (based off the edit):

var CACHEobject = {};
function doSomething(id) { 
   CACHEobject[id] = $('#' + id);
}