When should i wrap a DOM object with $()?

Question

Using JQuery:

Sometimes, I can do variable.val() and it works. Sometimes, I'm required to use $(variable).val().

I want to be able to make the choice without trial-and-error.

Does anyone know when to wrap an object with $() while using JQuery?

Answer 1

Wrapping a DOM object with $() will convert it to a jQuery Wrapped Set Element. This way you should be able to call jQuery methods with it (val(), attr(), show(), hide(), serialize()).

If however you need to get or set pure javascript properties, then you shouldn't wrap it.

Answer 2

Does anyone know when to wrap an object with $() while using JQuery?

To the point: when obj instanceof jQuery returns false. This is often the case with this and method arguments (unless the method is documented so that the argument MUST be a jQuery object).

So if you have a this and you want to have jQuery functions, then you need to wrap it. E.g.

function() {
   $this = $(this);
   $this.val();
}

Also if you have a function whose arguments are not necessarily jQuery elements and you want to ensure that they are, then you need to wrap it first. E.g.

function(e) {
    e = $(e);
    e.val();
}

It does not harm to re-wrap an jQuery element.

Answer 3

At the beginning of learning jQuery, it is often trial-and-error to seek out when a variable is already wrapped or not. For example, in event functions, the this-variable is not a jQuery-object. Also, I believe it's not dangerous at all to re-wrap a jQuery-object.

I don't think it's something you need to worry about, because you'll find out soon enough when to wrap and when not to, as you write more jQuery-code in the future.

Answer 4

If you have an event handler then to get val() you would need to wrap it, as elem below is not wrapped, but you could just do elem.value in my example below.

$('#someid').bind('click', function(e) {
  var elem = e.currentTarget;
}

If you didn't get the element from using a selector you will probably need to wrap it.

You could just have a utility function that will return a wrapped element, if you really want it, so it is always wrapped.

Just pass in any element to it, and it can then check if it is a jquery object and if not wrap it, but it will always return the wrapped version.

Answer 5

There's no harm in always using $(something) (if you plan to use jQuery methods on something)

Answer 6

Simply put $(variable) takes a DOM element and creates a jQuery object. You need to use it any time you end up with a DOM object rather than a jQuery object.

The most likely reasons you'd get a DOM object would be:

1. Events - In any event you bind (like click) in jQuery, the this variable and all the event arguments will reference DOM objects (not jQuery objects).
2. Non-jQuery javascript - If you have parts of your code that still use document.getElementById (Like if you have some legacy javascript or are referencing a third-party library that's not a jQuery plugin for some reason) then these will be DOM objects and need to be wrapped.

There is however no harm in calling $(variable) if variable is already a jQuery object, beyond the obfuscation to someone who might presume it's a DOM object by how you use it, and you can always get back to the DOM object by calling $(variable)[0].