How do I cache jQuery selections?

Question

I need to cache about 100 different selections for animating. The following is sample code. Is there a syntax problem in the second sample? If this isn't the way to cache selections, it's certainly the most popular on the interwebs. So, what am I missing?

note: p in the $.path.bezier(p) below is a correctly declared object passed to jQuery.path.bezier (awesome animation library, by the way)

This works

    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $('#image1').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $('#image2').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

This doesn't work

    var $one = $('#image1'); //problem with syntax here??
    var $two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

Answer 1

   var one = $('#image1');
   var two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

fix

when you do:

   var one = $('#image1');

you're storing the jquery object returned by the selector in the var "one". So you don't need to use $ anymore.

Answer 2

Also the variable declarations should be outside, but the selectors should be inside $(document).ready(), maybe those images are not ready yet otherwise?

edit, like this:

var one;
var two;
$(document).ready(function() {
     one = $('#image1');
     two = $('#image2'); 
     animate1();
     animate2();
})

Answer 3

If the images are not loaded when you call them, jQuery will return an empty object. Move your assignment inside your document.ready function:

$(document).ready(function() {
    var $one = $('#image1');
    var $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

If you need to cache them for later use outside of your initialization script then add them to a storage object:

var my_storage_object = {};
$(document).ready(function() {
    var my_storage_object.$one = $one = $('#image1');
    var my_storage_object.$two = $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

Then later on, outside of document.ready you can call:

my_storage_object.$one //still has a reference to the jQuery object.

Answer 4

Try this:

var $one;
var $two;
$(document).ready(function() {
    $one = $('#image1');
    $two = $('#image2');
    animate1();
    animate2();
})
function animate1() {
    $one.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate1()", 3000);
}
function animate2() {
    $two.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate2()", 3000);
}

The variables are defined in global scope, but the selectors are executed when the document is ready.

Answer 5

Your jQuery selectors always need to be inside the .ready() block, so why not put everything there? That way you leave nothing in the global scope.

$(document).ready(function() {
    var storedGlobals = {
        $one: $('#image1'),
        $two: $('#image2')
    };
    animate1(); 
    animate2(); 

    function animate1() { 
        storedGlobals.$one.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate1()", 3000); 
    } 
    function animate2() { 
        storedGlobals.$two.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate2()", 3000); 
    }
});