How is "this" used in this JS code

Question

I've been reading quite a bit now, but I still haven't gotten a explanation that would make sense, from a noobs perspective.

$(document).ready(function() {
 $("#slideshow").css("overflow", "hidden"); /*kuna JS t66tab siis ei ole vaja scrollbari n2ha*/
 $("#slideshow-nav").css("visibility", "visible"); /*nupud tehakse n2htavaks*/
 $("#slideshow-nav a[href=#pilt1]").addClass("active"); /*muudetakse esimene nupp aktiivseks*/

 $("#slideshow-nav").localScroll({ /*see funktsionaalsus pärineb ka http://flesler.blogspot.com/*/
  target:'#slideshow', axis: 'x'   /*vajalik scrollTo ja localscroll kasutamiseks, paneb paika,et need pluginad liigutaksid slaidi pilte mööda x-telge*/
 });

 $("#slideshow-nav a").click(function(){
  $("#slideshow-nav a").removeClass("active");
  $(this).addClass("active"); /*kui vajutada uuele nupule v6etakse aktiivne klass sealt 2ra ja lisatakse vajutatud nupule*/
  });

});

What purpose does $(this) have in context to this: $(this).addClass("active");, I understand what the code itself does, but what is the purpose for $(this), if $(this) wouldn't be used there, is there a easy way of achieving the same effect?
Thanks!

In a jQuery event listener, `this` is the element matched by the selector that received the event. — Ry-, Apr 16 '14 at 17:16
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. Here is a very good read - https://learn.jquery.com/javascript-101/this-keyword/. Lots of good examples as well — TriniBoy, Apr 16 '14 at 17:18

score 0 · Answer 1 · edited May 23 '17 at 11:57

See jQuery $(this) vs this.

$("#slideshow-nav a").click(function(){
  $("#slideshow-nav a").removeClass("active");
  $(this).addClass("active");
});

When the handler function you passed to $("#slideshow-nav a").click() is called, this is bound to the element that fired the event. You then pass this to $() to construct a jQuery object around that element, so you can use jQuery's addClass() on it. You could accomplish the same thing by replacing that line with this.classList.add("active"), to use the non-jQuery way to do the same thing.

Long story short, you use $(this) when this is bound to some element and you want to use jQuery methods on that element.

So, what this code ultimately does is:

Remove the class "active" from all elements matching the selector #slideshow-nav a.
Add the class "active" to the element receiving the event (the clicked element).

In this manner, any previously "active" element is "deactivated", and the clicked one is "activated".

score 0 · Answer 2 · answered Apr 16 '14 at 17:23

0

$(this) refers to the the jQuery element that was clicked. Using $(this) is a surefire way to ensure you're referencing the element that was the user interacted with. Unfortunately there is no good way to ensure that you're referencing the element you interacted with without using $(this)

answered Apr 16 '14 at 17:23

HarleyKwyn

31
3

No, `this` refers to the element that was clicked, and `this` is all that's necessary to refer to it. Wrapping it in a jQuery constructor is only necessary if you want to then use jQuery methods to interact with that element. It would actually work just as well, in this case, to replace that line by `this.classList.add("active")` (most browsers) or `this.className = this.className + " active"` (IE < 10). – tgies Apr 16 '14 at 17:27
That's precisely what I said, it is the "jQuery element" not the "element" – HarleyKwyn Apr 16 '14 at 17:29
Technically there is no such thing as a "jQuery element", though I understand what you are saying. jQuery turns everything into arrays, so $(this)[0] = $this. $(this) is an array of information about the element that jQuery uses as a selector. – Kelderic Apr 29 '14 at 03:25

score 0 · Answer 3 · answered Apr 16 '14 at 17:40

First let's start with what this means. In JavaScript, any function can be bound so that this refers to an arbitrary thing (object, number, string, etc.) inside of the function when it's called (refer to Function.bind). In general there are no assurances of what this will refer to inside of an arbitrary function; you'll have to read the documentation/source code or test for yourself.

When you call click(), jQuery is binding this in your callback function to a target element in the matched set. When you say $(this) (or jQuery(this)), you're simply wrapping the element with a jQuery "wrapper".

As for alternatives, jQuery will pass the event object to your callback, and you can access the target through that:

$("#slideshow-nav a").click(function(evt){
    console.log($(evt.target)); //I think just using "$(this)" is easier!
});

score 0 · Answer 4 · answered Apr 16 '14 at 20:44

Per minitech's comment, $(this) refers to one of the 'a' elements in the slideshow-nav DOM element, specifically the one that was clicked.

$("#slideshow-nav a").click(function(){
  // $("#slideshow-nav a") refers to an array of links in slideshow-nav
  $("#slideshow-nav a").removeClass("active");
  // $(this) refers just to the specific link that was clicked
  $(this).addClass("active"); 
  });

This is best practice AFAIK. Is there some reason you do not want to use $(this)?

How is "this" used in this JS code

4 Answers4