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 (e.g. "$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.