Why should I use $ (this)?

Question

Possible duplicate:
jQuery $ (this) vs this

In jquery, sometimes I find that inside the function I have to use $(this) because this will not work:

 var listItems = $('li'); listItems.each(function(index) { $(this).css({ }) }) 

Any ideas on the reason?

Answer 1

• $() is a jQuery constructor function
• this is a reference to the DOM element of invocation

So you turn the DOM reference into a jQuery object

In your example, you can also use

 listItems.each(function(index, element){ $(element).css({ }); }); 

.. since .each() will pass both index + elements in the callback.

Answer 2

this is a native DOM element. $(this) is a jQuery object that allows you to call functions on it, such as .css() .

Answer 3

I know I was a little late on this topic, but I just wanted to know that over-packing DOM objects is one of the most common crimes against jQuery. Caring for the content of a jQuery instance can have amazing effects in terms of performance, and it's so easy to do that you have no excuse.

Usually, when people have a DOM object (referenced as this or element ), they will try to wrap it every time they need access to the jQuery method:

 jQuery(this).css('a', 'b'); 

The problem is that you do this several times:

 jQuery(this).css('a', 'b'); jQuery(this).find('span').attr(...); jQuery(this).... 

Each time jQuery() is called, a new jQuery instance is created. Such an operation is expensive and should be avoided, if at all possible - especially in cycles!

To avoid this, for one, you could use a chain with all the methods that return an instance of jQuery $(this).css(a,b).attr(a,b)... ). The rest of the time, you should have a locally declared variable that references the jQuery instance, and then just use this:

 var self = jQuery(this); self.css(...); self.attr(...); 

If you do this in the .each() callback function, a new jQuery object is created at each separate iteration. You can avoid this by having one generic jQuery object that you constantly mutate, and then you can run jQuery methods from this single instance:

Look at this:

 jQuery.single = function(a){ return function(b){ a[0] = b; return a } }(jQuery([1])); 

Now look at this:

 $('a').each(function(i){ $.single(this).append('Anchor number ' + i); }); 

Only one jQuery object is used. You can do this even faster by avoiding id resolution:

 $_ = $.single; $('a').each(function(i){ $_(this).append('Anchor number ' + i); }); 

Food for thought. More details here : http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/

Answer 4

this usually the default DOM object, which means that it only has methods for regular DOM objects.

If you want to call a library-specific function (for example, the jQuery .css function), you first need to convert it to a full jQuery object, which means $() by default if you pass it a DOM object.

(You can also pass other things to $() , such as an HTML string (to create a new DOM object wrapped with jQuery) or a CSS selector (to get a set of jQuery objects matching DOM objects matching the selector).

Answer 5

If you are using Firefox, try console.log ($ (this)) and console.log (this) to see the difference.