Question

When is it most beneficial to use $(this) and when should I use the plain old this ($(this)[0])?

I have posted on SO before, where someone told me I shouldn’t use $(this) so much in my function but rather this.

Why? Is $(this) rather memory intensive or something? Or does it sometimes contain more data than you are currently using in your function (too much overhead)?

Answer 1

It depends what you need. In the context of e.g. an event handler,

• this is a reference to the native DOM object

• $(this) is a reference to the jQuery extended object which adds all the jQuery goodness to an element (.css(), .attr() and the dozens, if not hundreds of additional methods).

In a jQuery extended object, the native DOM object is still available as the 0 property:

element = $("#element");
alert(element[0].id); // Outputs the native object's `id` property

If you need only the native functionality, there is no need to wrap it into a jQuery object, but you usually want to be able to access the extended functions at some point.

Re overhead, I don’t have any hard data but I imagine this is one of the most heavily optimized operations in all of jQuery, as it often has to be applied to every element. Unless you’re working with tens of thousands of elements, there is probably not going to be a notable difference either way.