jQuery "this" and element collection

Question

In this piece of code:

    $(function() {
        $("div").click(function() {
            $(this).before("<p>Hi</p>");

        });
    });

What does 'this' actually refer to? Does it refer to the whole list of divs, or just to the specific one clicked? And how can I know?

Also, would it matter if I wrote this without the jQuery sign or are they the same?

Don't forget to make use of console.log to check the value of any variables you aren't sure of, it will save you a lot of time — atmd, Apr 24 '13 at 11:18
possible duplicate of [jQuery $(this) vs this](http://stackoverflow.com/questions/1051782/jquery-this-vs-this) or may be [$(this)](http://stackoverflow.com/questions/3889570/what-is-the-difference-between-this-this-and-this) — palaѕн, Apr 24 '13 at 11:29

score 5 · Accepted Answer · answered Apr 24 '13 at 11:16

Within the click handler, this is a reference to the single DOM Element which fired the event—in this case the div element. By wrapping it in $() you create a jQuery reference to that div element (a jQuery object containing that single element, allowing you to call jQuery methods on it.

$(function() {
    $("div").click(function() {
        $(this).before("<p>Hi</p>"); // 'this' is an HTMLDivElement

    });
});

score 3 · Answer 2 · answered Apr 24 '13 at 11:16

this is the DOM object, whereas $(this) is the jQuery wrapper around same.

When using this, you can call DOM methods on it, but not jQuery methods. When using $(this), you can call jQuery methods on it, but not DOM methods.

score 2 · Answer 3 · answered Apr 24 '13 at 11:16

this is always the specific DOM node with which you're interacting, wherease $(this) is the same DOM node, but wrapped in a jQuery object.

The difference is that this can be used with plain JavaScript/DOM API (and $(this) cannot), whereas, if you need to use jQuery methods (hide(), show(), etc...), then you'll need to use $(this) (and not this).

score 2 · Answer 4 · edited Apr 24 '13 at 11:28

this is just a reference. The language reads it as taking in the most currently active element.

It can be used throughout your code to enable many tasks to take a range of variables that are dependent on the current session.

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

take a look at this.

score 1 · Answer 5 · answered Apr 24 '13 at 11:16

1

$(this) refers to the jQuery object created from the selector you attached the event handler too. Any div element the event is performed on becomes this along with the added properties and methods created from being a jQuery object

answered Apr 24 '13 at 11:16

SomeShinyObject

7,581
6
39
59

score 0 · Answer 6 · edited Apr 24 '13 at 11:22

0

In this circumstance, this refers to the particular HTML element you have clicked.

No you need to put '$' sign before (this), or else it will result in JavaScript errors.

edited Apr 24 '13 at 11:22

Matt

74,352
26
153
180

answered Apr 24 '13 at 11:14

chandresh_cool

11,753
3
30
45

score 0 · Answer 7 · edited Jul 31 '14 at 21:14

0

Using jQuery $(this)[0] is the same as using this in Javascript.

So $(this)[0] == this.

edited Jul 31 '14 at 21:14

daniula

6,898
4
32
49

answered Apr 24 '13 at 11:18

WheretheresaWill

5,882
7
30
43

3

... *but what is `this`* ;) – Matt Apr 24 '13 at 11:18
1

Obviously *this* is **this**, but clearly different to `this`. Duh! – WheretheresaWill Apr 24 '13 at 11:22

score 0 · Answer 8 · edited Jun 20 '20 at 09:12

0

Copied from Nick Craver's answer:

this - Refers to the DOM element in the handler you're currently on, but this may be another object entirely in other situations, but it's always the context.

$this - Usually created by var $this = $(this) a cached version of the jQuery wrapped version for efficiency (or chain off $(this) to get the same in many cases).

$(this) - The jQuery wrapped version of the element, so you have access to all its methods (the ones in $.fn specifically).

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 24 '13 at 11:18

Forrestoned

19
2

2

Next time you copy and paste someone elses answer, I would be careful to make it *explicitly* clear your answer is a copy and paste; plagiarism is taken *very* seriously on Stack Overflow (http://meta.stackexchange.com/questions/78658/is-it-okay-to-copy-paste-answers-from-other-questions). – Matt Apr 24 '13 at 11:28
i apologize for my error, i copy and pasted nick Craver but i also wrote that was his answer – Forrestoned Apr 24 '13 at 11:48
I appreciate there was a link to his answer in your post, but like I said; you need to make it ***explicitly*** clear that your answer is copied from his; otherwise it could be interpreted as a link to further reading. – Matt Apr 24 '13 at 11:49

jQuery "this" and element collection

8 Answers8