Explaining $(this)

Question

I having trouble understanding $(this), I made a version of rock, paper, scissors and applied jQuery for the user to choose a button choice against the computer. I was hoping someone can explain what $(this) is referring to, is it the btn-primary? The function is below and if you need the html it is in the codepen link. Also, the result is shown in the console.

https://codepen.io/anon/pen/VeLWKP

$(".btn-primary").on("click", function () {
    userChoice = $(this).attr("id");
    computerChoice = computerOptions[Math.floor(Math.random() * computerOptions.length)];
    console.log(userChoice, computerChoice);
});

`$(this)` inside the event handler refers to the element on which the event has occurred. — Tushar, Dec 10 '15 at 03:42
Possible duplicate of [jquery: what does "$(this)" exactly mean?](http://stackoverflow.com/questions/6749634/jquery-what-does-this-exactly-mean) — T J, Dec 10 '15 at 03:47
absolutely no research effort.. I wonder who upvotes these... — T J, Dec 10 '15 at 03:48
Every time I see `$(this).attr("id")`, I die inside. Is `this.id` really so hard? Do we really need to instantiate a whole new jQuery object just to get one thing that's right there already? — Niet the Dark Absol, Dec 10 '15 at 03:54
Well I have been learning jQuery for only two weeks, pretty new to this stuff. I didn't know you can do that. — morizvi23, Dec 10 '15 at 04:00

zpr · Answer 1 · 2015-12-10T03:52:25.757

The $(this) in jQuery is referring to the btn-primary, yes, but not the selector as a whole. It refers to specifically that which triggered your anonymous function; that is, the button you clicked, as a jQuery object.

It is a common concept in object-oriented languages, and perhaps more intuitive. Say we have a class Dog, and we want to have several instances of this class:

dog = new Dog('Albert');

Then we want a method on the dog: speak, for which the dog will bark its own name. The method might be written as so: (pseudocode)

class Dog {

  string name;

  function Dog(name) {
    this.name = name;
  }

  function speak() {
    return "I'm "+ this.name + "! Bark!";
  }

}

That ended up looking a lot like Java. So, the this similarly refers to the calling scope. Because we could have many dogs, each with their own names, and we need a convenient way to get ours. Other languages call this self.

score 2 · Answer 2 · answered Dec 10 '15 at 03:44

this refers to the DOM element that the event fired on - in this case the DOM element that was clicked. It refers only to the single element that was clicked, not all .btn-primary elements.

By using $(this) we are selecting it using jQuery, effectively wrapping the element and letting us use further jQuery methods on it.

score 2 · Answer 3 · answered Dec 10 '15 at 03:44

this is a reference to the member that invokes the current function.

then you can wrap it in the jquery function $() to select it just like you would another selector.

In the javascript that you have included you could have simply had this.id and not invoked jquery to do the selector. Changing your javascript to be:

$(".btn-primary").on("click", function () {
    userChoice = this.id;
    computerChoice = computerOptions[Math.floor(Math.random() * computerOptions.length)];
    console.log(userChoice, computerChoice);
});

score 1 · Answer 4 · answered Dec 10 '15 at 03:43

1

When you attach an event handler to an element using jQuery, "this" refers to that element (note - it is not a wrapped jQuery object, hence the additional wrapping in $() prior to calling the attr() method).

answered Dec 10 '15 at 03:43

MPT

183
8

score 1 · Answer 5 · answered Dec 10 '15 at 03:44

1

$(this) will refer to the DOM element in which the event have occurred.

answered Dec 10 '15 at 03:44

Lucas Rodriguez

1,203
6
15

score 1 · Accepted Answer · answered Dec 10 '15 at 04:18

If you are from Object oriented programming background then there is this keyword which refers to the current object, calling the method in the same way $(this) in jquery refers to the DOM for which the event is occurred Eg.

$("#submit_button").click(function(){
    console.log($(this).attr('id'));
})

In the above code $(this) refers to the element with ID submit_button and the result of the code will be submit_button in console of the browser since I am just logging the ID attribute of current element.

But $(this) can be useful in case of class selectors

Eg.

<!-- Just snippet not complete code -->
<button class='color' id='red'>Red</button>
<button class='color' id='green'>Green</button>
<button class='color' id='blue'>Blue</button>
<script>
$(".color").click(function(){
    console.log($(this).attr('id'));
})
</script>

In the code snippet above $(this) can be used to identify which button has been clicked out of three buttons.

I hope $(this) will clear all your confusion of $(this) :)

Happy to help!

Explaining $(this)

6 Answers6