$(this) keyword on jQuery

Question

Trying to understand how the this keyword works. For example on this code, this is refering to "button" right? (or to the action of clicking the button). Thank you

 $(document).ready(function(){
  $("button").on("click", function(){
    var discount = $(this).closest(".tour").data("discount");
    var message = $("<span>Call 1-555-jquery-air for a $discount discount.</span>");
    $(this).closest(".tour").append(message);
    $(this).remove();
  });
});

HTML here:

<div id="tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="usa tour" data-discount="299">
      <h2>New York, New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
    <li class="europe tour" data-discount="176">
      <h2>Paris, France</h2>
      <span class="details">$2,299 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
    <li class="asia tour" data-discount="349">
      <h2>Tokyo, Japan</h2>
      <span class="details">$3,799 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
  </ul>
</div>

It's discussed at length in several places. Here's the unencapsulated "this" in the offical jquery docs: http://learn.jquery.com/javascript-101/this-keyword/ there's also this post that elaborates on it a bit: https://remysharp.com/2007/04/12/jquerys-this-demystified and here's a SO question about the difference between $(this) and this. http://stackoverflow.com/questions/1051782/jquery-this-vs-this — Mic, Jan 22 '15 at 17:56

score 3 · Accepted Answer · answered Jan 22 '15 at 17:55

In that code, this is a reference to the element that was clicked (the actual DOM button element). $(this) is a function call, passing this into $() and getting back a jQuery object. That jQuery object is a wrapper around the DOM element.

So that code is repeatedly calling $() with the same argument. It's not particularly harmful, in that context, but if you were in a tight loop or something, you'd want to call it once and keep a reference to the result.

Pixel Rubble · Answer 2 · 2015-01-22T18:09:08.043

In JavaScript, as in most object-oriented programming languages, this is a special keyword that is used in methods to refer to the object on which a method is being invoked. The value of this is determined using a simple series of steps:

If the function is invoked using Function.call() or Function.apply(), this will be set to the first argument passed to .call()/.apply(). If the first argument passed to .call()/.apply() is null or undefined, this will refer to the global object (which is the window object in web browsers).
If the function being invoked was created using Function.bind(), this will be the first argument that was passed to .bind() at the time the function was created.
If the function is being invoked as a method of an object, this will refer to that object.
Otherwise, the function is being invoked as a standalone function not attached to any object, and this will refer to the global object.

Reference to this URL

seems a bit high level for what OP is asking. Does it really answer the question and specific use case? — charlietfl, Jan 22 '15 at 18:02
The question is absolutely answered by this... "If the function is being invoked as a method of an object, `this` will refer to that object." It may be a bit high level, but I don't know @vsl0610, and they may completely comprehend all of this, then again, they may not. In which case this can be helpful knowledge for them going into the future. — Pixel Rubble, Jan 22 '15 at 18:08

score 0 · Answer 3 · answered Jan 22 '15 at 17:59

0

Typically, the this keyword is similarly used to refer to an object that the function (where this is used) is bound to. The this keyword not only refers to the object but it also contains the value of the object.

answered Jan 22 '15 at 17:59

Rahul Winner

430
3
16

$(this) keyword on jQuery

3 Answers3