jQuery: Is it possible to assign a DOM element to a variable for later use?

Question

I'm working on a project that is using jQuery, which I'm much more familiar with Mootools.

I'll start with my code first.

var customNamespace = {
    status: 'closed',
    popup: $('#popup'),

    showPopup: function() {
        // ...  
    }
}

$(document).ready(function(){
    console.log($('#popup'));
    console.log(customNamespace.popup);
    console.log($(customNamespace.popup));

    $('#popup').fadeIn('slow');
    (customNamespace.popup).fadeIn('slow');
    $(customNamespace.popup).fadeIn('slow');
});

My goal is to not have jQuery traverse the DOM everytime I want to do something with the #popup div, so I wanted to save it to a variable to use it throughout my script.

When the page loads, the console prints out the object 3 times as I would expect, so I assumed that for each method, the fadeIn would just work. But it doesn't, only

$('#popup').fadeIn('slow');

Actually fades in the div.

Even if I remove my namespace hash, and just save the object to a global variable, and do a

var globalVariable = $('#popup');
.
.
.
globalVariable.fadeIn('slow');

Also does not work as I thought it would. Can jQuery do what I am trying to do?

Answer 1

You want to be careful that the DOM is actually loaded before you run your selector and assign it to the variable, but otherwise you can store a reference to a DOM element in a variable with no problems.

var globalVariable;

$(document).ready(function(){ 
    globalVariable = $('#popup');
    console.log($('#popup')); 
    console.log(globalVariable); 

    $('#popup').fadeIn('slow'); 
    globalVariable.fadeIn('slow'); 
});

Answer 2

Where are you assigning your global variables?

If it is outside the document.ready declaration, then you may well be assigning it something that has not been loaded.

Try this:

$(document).ready(function(){ 
    var customNamespace = { 
        status: 'closed', 
        popup: $('#popup'), 

        showPopup: function() { 
            // ...   
        } 
    } 
    console.log($('#popup')); 
    console.log(customNamespace.popup); 
    console.log($(customNamespace.popup)); 

    $('#popup').fadeIn('slow'); 
    (customNamespace.popup).fadeIn('slow'); 
    $(customNamespace.popup).fadeIn('slow'); 
}); 

What happens when you try to output .length? :

console.log($('#popup').length); 
console.log(customNamespace.popup.length); 
console.log($(customNamespace.popup.length));