What is the correct way to use variables in JQuery?

Question

I want to reference an element once and then reuse it threw out my code but I'm not sure the correct way. Below is what I tried but it only works in some places. (EDIT: works, had an error farther up in my code, but I'm still curious if this is the best practice or not.)

$(document).ready(function() {
  var image = $("#content img");
  image.wrap("<span />");
  image.hover(function(){}, function(){});
});

Answer 1

That should work. What indication are you getting that image.hover() is not working?

As a side note: this certainly isn't a standard, but when I'm doing stuff like this, I preface variables that are jQuery objects with a $, so: var $image = $("#content img"); - just helps me keep track of what is a jQuery object.

Answer 2

hover() should work fine. Inside the functions you pass into hover() you use $(this) to get at the element being hovered over. So:

$(document).ready(function() {
    var image = $("#content img");
    image.wrap("<span />");
    image.hover(function(){
        $(this).css({border:'5px solid red'});
    }, function(){
        $(this).css({border:'none'});
    });
});

This works for me.

Answer 3

The way you have it written above, var image is a local variable scoped to the anonymous function being called onReady. So any calls to that variable outside the scope of the function will produce ReferenceError . In Javascript, prefixing variable instantiation with var labels it as a local variable whereas leaving it off makes a global variable (usually ill -advised). Consider the following (contrived) example:

(function() {
  global_variable    = "global";
  var local_variable = "local";

  console.debug(global_variable);
  console.debug(local_variable);
})();

console.debug(global_variable);
console.debug(local_variable);

// Produces:

global
local
global
ReferenceError: local_variable is not defined

Answer 4

I'm not sure I follow you, Jared. If you have a look at the following JS Bin, I've (I think) duplicated your example, and it runs fine.

http://jsbin.com/izimi3/

Perhaps the issue is syntactical, or scope oriented?

Also, if this is literally the code (sans details, obviously), then I would suggest against using a variable to store this at all. Typically you'll want to use variables when you're going to be reusing a selector often (eg "$this = $(this)"), otherwise keeping the code simple enough as to use the selector you need in the moment may make things easier for you.

Anyway, I hope I read right and didn't just waste your time.

Answer 5

Your code looks fine to me... Making a local variable inside the callback, like you did, is always going to be better than using a global object. However, the beauty of jQuery is that you can shorten your code to not even use a variable at all:

$(document).ready(function() {
  $("#content img").wrap("<span />").hover(function(){}, function(){});
});

This is called chaining and allows you to "chain" methods of the jQuery object together in one expression. But if you really need the variable for whatever reason, I see nothing wrong with it.