Understanding and using 'this' in jQuery function

Question

I have a function that I would like to apply to different elements - or rather, different selectors creating different contexts. How can I modify the below function to use $('this'), instead of specifying the $('#themes') selector inside the getClass function?

The code:

$('#themes').change(function(e) {
  getClass(this, e); 
});

function getClass() {
  var classToAdd = $('#themes').find('option[value]:selected').map(function() {
    return this.value;
  }).get().join(' ');
  var allClassess = $('#themes').find('option[value]').map(function() {
    return this.value ? this.value : null;
  }).get().join(' ');
  $('#result').removeClass(allClassess).addClass(classToAdd);
}

See fiddle here.

In event listeners, this points to the current element the event is fired for, so you shouldn't re-select the element by a selector, use this instead. — frogatto
– frogatto, Commented Sep 6, 2016 at 20:02

Charles · Accepted Answer · 2016-09-07 12:06:50Z

1

The event has a currentTarget property that's exactly what you're looking for, and no need to pass this to it... in fact, just reconfigure the binding like this:

$('#themes').on('change', getClass);

function getClass (event) {
  var themes = $(event.currentTarget);
  var classToAdd = themes.find('option[value]:selected').map(function() {
    return this.value;
  }).get().join(' ');

  var allClassess = themes.find('option[value]').map(function() {
    return this.value ? this.value : null;
  }).get().join(' ');

  $('#result').removeClass(allClassess).addClass(classToAdd);
}

edited Sep 7, 2016 at 12:06

answered Sep 6, 2016 at 19:45

Charles

6406 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Meek Over a year ago

So simple. Thanks a lot.

Charles Over a year ago

No problem. Just as a tip, jQuery's binding behavior is to always pass the event like this. Generally speaking, if you need more data than the event itself you probably have an opportunity to make the binding more generic somewhere.

SwissCodeMen · Accepted Answer · 2021-04-21 08:36:00Z

1

the this operator has to do with scoping and what the current object is you are working on. If no object is currently selected then this will reference document, also known as the entire webpage. You could assign a new variable to the passed selector, that is a fairly easy way to accomplish what you are doing:

('#themes').change(function(event) {
  getClass(this, event);
});

function getClass(elem, e) { //if you pass args into a func, you need to declare them in the prototype
  //elem now represents whatever object you passed it (in this case 'this')
  var classToAdd = elem.find('option[value]:selected').map(function() {
    return this.value;
  }).get().join(' ');
  var allClassess = elem.find('option[value]').map(function() {
    return this.value ? this.value : null;
  }).get().join(' ');
  $('#result').removeClass(allClassess).addClass(classToAdd);
}

The other option is to use a method or jQuery plugin, but that syntax is a little bit more to grapple with than this function. Understand how this function is taking in the object as a variable before moving forward with methods and plugins.

I hope this helps!

edited Apr 21, 2021 at 8:36

SwissCodeMen

5,03310 gold badges31 silver badges39 bronze badges

answered Sep 6, 2016 at 19:50

Mike

6472 gold badges7 silver badges23 bronze badges

1 Comment

Meek Over a year ago

Thanks for the explanation.

Thielicious · Accepted Answer · 2016-09-06 19:44:30Z

0

Use $(this) instead of this.
That way you don't have to define the same jQuery-selector.

answered Sep 6, 2016 at 19:44

Thielicious

4,4822 gold badges31 silver badges39 bronze badges

Comments

Adjit · Accepted Answer · 2016-09-06 19:58:28Z

It is important to understand the distinction between $(this) and this

$(this) - is a jQuery object containing this, so you would use $(this) whenever you want to run any jQuery functions

this - is a Javascript object, so any Javascript functions you want to use, you should use it on this.

Moreover, when using this, what it is, is dependent upon how the function is called. You shouldn't need to pass this and e to your getClass function. A simple $('#themes').change(getClass); will execute that function when #themes changes, and your this keyword in your getClass function will be the select object that is #themes while $(this) will be your jQuery object that contains this.

So instead, you can just use $(this).find(':selected') and you should be good. However, keep in mind, your this keyword inside of your map function refers to the object that you are running the map function on (aka the $(this).find(':selected'))

Collectives™ on Stack Overflow

Understanding and using 'this' in jQuery function

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related