13

Possible Duplicate:
jQuery $(this) vs this

What is the difference between "this" and "$(this)"?

How do I know which one to use?

Related, I think:

With each, you have the optional parameters. How is the "i" different than "this" (or "$(this)")?

$('img').each(function(i) { ....code }

vs.

$('img').each(function() { ....code }
Community
  • 1
  • 1
Buttle Butkus
  • 9,206
  • 13
  • 79
  • 120
  • The question is similar but a bit different, and it is pretty hard in general to find information about "this", since search engines generally ignore it. – Buttle Butkus Dec 12 '11 at 03:44
  • The question may be a duplicate, but Joseph's answer is better than the one chosen on the other question. I was only able to solve my problem after reading these answers here, so I hope they are preserved for future searchers. – Buttle Butkus Dec 12 '11 at 06:04
  • Also, part of the reason this may be a duplicate is because it is pretty hard to search for "this" on Google. In fact, when I first came across OOP, it took me A LONG TIME to find information on "this" as well as "::" (paamayim nekudotayim). – Buttle Butkus Jan 26 '13 at 06:33
  • What is this question similar to? Link? – Yan King Yin Sep 22 '14 at 06:27

6 Answers6

13

the this object doesn't change. It is the owner of the function. It is, in most cases like this, simply a node and you can reference all of its properties like this.className. (think of it as you would a node or whatnot that you get with document.getElementById). It is just the "owner" of the function.

Therefore, you are just passing the this object to jQuery's $().

Conclusion: If you want to use jQuery functions for the current node, use $(this). But if you want to access the objects own properties (e.g. .name, className, .id), use simply this.

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
5

this is for javascript, $(this) for jQuery. you can use $(this) for every functions of jQuery, not the case for this.

Edit: For your example the i is just the incremented number that he is on (0 the 1st 10 the 11the) the $(this) is the element img precisely you can do either :

$(this).on('click', function() { console.log(123); });
or
$('img').eq(i).on('click', function() { console.log(123); });

Edit2: Here is a usage of this:

var sorter = {
    sort: function() {
        console.log('sorting');
    },
    requestSorting: function() {
        this.sort();
    }
}
sorter.requestSorting.bind(sorter);

In this example it's exactly used like the $this in PHP class. That's why I said it's more for pure javascript functions.

user1040899
  • 534
  • 1
  • 8
  • 19
  • 1
    *this is for javascript* What does that exactly mean? – alex Dec 12 '11 at 03:38
  • He means to say that the keyword, "this", is a basic javascript functionality, whereas "$(this)" is jQuery specific, not basic javascript. – Buttle Butkus Dec 12 '11 at 03:46
  • user1040899, thanks for the edit. It helps clarify what "i" would do, but doesn't explain why/when it would be preferred over using "$(this)", which seems simpler to use. +1 – Buttle Butkus Dec 12 '11 at 03:51
  • I edited a 2nd time. Please correct me alex if you think I'm saying something wrong... – user1040899 Dec 12 '11 at 03:59
  • I think Joseph answer is better then mine ! – user1040899 Dec 12 '11 at 04:07
  • Yes it is. It is more focused well worded. It really is a good answer. It clarifies in a few sentences what others spend dozens of sentences skirting around. But your explanation of "i" is good. Thanks. – Buttle Butkus Dec 12 '11 at 04:10
2

this in jQuery generally points to a DOM element, such as HTMLSelectElement.

Rewrapping it with the jQuery function allows you to call jQuery methods on it.

alex
  • 479,566
  • 201
  • 878
  • 984
1

Putting this inside $() turns this into a jquery object, with the ability to have all the typical jQuery methods called on it. this by itself it just a normal javascript reference to a given object/element.

thescientist
  • 2,906
  • 1
  • 20
  • 15
0
$( ".class" ).click( function () {

  $( this ).load( "/path/to/file.html" );

} );

In this example, this is referring to the .class div and would load the contents of file.html into said div when you clicked on it.

So click on .class, file.html gets loaded into it.

Willem Ellis
  • 4,886
  • 7
  • 38
  • 55
  • Very interesting trick. +1. But doesn't really clarify the difference between the $(this) and this or explain when to use which. – Buttle Butkus Dec 12 '11 at 03:31
0

Whether you need $(this) or not depends on the context you're working in.

Need it:

  • When handling jQuery Events this is passed as the DOM element that triggered the event $(this) turns DOM element into a jQuery object

  • Anytime you get a DOM element Other instances where you have a DOM element (or an object) and want to turn it into a jQuery object

Don't need it:

  • Inside of a jQuery Plug-in jQuery plug-in (jquery.fn) function this is a jQuery object already so no need to apply $(this) in here.

No harm done in $(this) even if this is a jQuery object because jQuery will just return the same object.

Rick Strahl
  • 17,302
  • 14
  • 89
  • 134
  • Ok, but what about inside the ".each" loop? In another question I had some code where I use "this" instead of "$(this)" and an answerer said it was wrong. Inside the ".each" loop am I not accessing a jquery object or is it a DOM element? (here is the other question I am referring to: http://stackoverflow.com/questions/8463878/trying-to-set-css-property-left-to-using-jquery-centering-image-inside-div/8463929#8463929) – Buttle Butkus Dec 12 '11 at 03:42