22

I started to use ES6 fat arrow function notation and I really like it. But I am a little bit confused about it context. As far as I know, keyword this inside fat arrow function refers to context where the function is currently running. I wanted to do some simple jQuery iteration like:

$('ul#mylist > li').each(() => {
   $(this).addClass('some-class-name');
});

But obviously this piece of code not working. How do I refer, inside fat arrow function, to current "LI" element in this specific code?

Script47
  • 14,230
  • 4
  • 45
  • 66
exoslav
  • 2,094
  • 3
  • 21
  • 26

2 Answers2

40

The each() method supplies two parameters to the callback-function. They are current index and the current item. Thus you could do the following:

$('ul#mylist > li').each((i, v) => {
   $(v).addClass('some-class-name');
});

Where the "v" variable is the current "li" element

Igor Bukin
  • 976
  • 7
  • 14
5

Because this in the arrow function context is the same as the calling context.

The each function provides a current element as the second argument to the callback so

$('ul#mylist > li').each((i, el) => {
  $(el).addClass('some-class-name');
});

Or in the given case there is no need to loop

$('ul#mylist > li').addClass('some-class-name');
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531