Using TypeScript Variable Inside Jquery Each Loop

Question

I have variable called tableIndexNumber that i need use inside diffrent methodts. So when i try to reach that variable i use "this.tableIndexNumber" and i can reach it. But i cant use it this way inside Jquery each loop because of htmlElemets define as "this" too inside the each loop. So which way should i follow ?

export class TablesComponent implements OnInit {

tableIndexNumber = 1;

constructor() { }

change(col: number) {

$('#' + col).each(function () {

  if ($(this).attr('class') === 'box') {

    $(this).addClass('boxSelected');
    this.tableIndexNumber ++; 

  } else {
    $(this).removeClass('boxSelected').addClass('box');
  }
});

}

Possible duplicate of jQuery each() closure - how to access outside variable — Prerak Sola
– Prerak Sola, Commented Mar 18, 2019 at 15:53

Zac Delventhal · Accepted Answer · 2019-03-18 18:42:31Z

2

The old school way of handling this was to save this to a variable before the each called "context" or "that" or something like that, and then using that variable. ~~Thankfully today we have arrow functions, which are perfect for this situation since they do not have their own this context.~~

UPDATE: I neglected to look up the syntax for each. Looks like you need the internal this, so an arrow function won't work. Instead, you can solve your problem by saving the outer this to a variable:

export class TablesComponent implements OnInit {
    tableIndexNumber = 1;

    constructor() { }

    change(col: number) {
        const component = this;
        $('#' + col).each(function() {
          if ($(this).attr('class') === 'box') {
            $(this).addClass('boxSelected');
            component.tableIndexNumber++; 
          } else {
            $(this).removeClass('boxSelected').addClass('box');
          }
        });
    }
}

edited Mar 18, 2019 at 18:42

answered Mar 18, 2019 at 15:56

Zac Delventhal

4,0494 gold badges25 silver badges27 bronze badges

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

4 Comments

Sercan Over a year ago

Hey Zac. Firstly thank you so much for your answer. I ve tried your code but when i run that, it always goes to 'else' section. That way ($(this).attr doesnt work as correct way :/

Zac Delventhal Over a year ago

My bad, I should have looked up the jQuery method first. I've updated my answer.

Sercan Over a year ago

Thank you. By the is it possible to call that variable ("tableIndexNumber") inside html ?

Zac Delventhal Over a year ago

HTML just handles general formatting. It doesn't know anything about variables or logic like JS. If you were using something like Angular or React, it would include a templating language that was an alternative to HTML, and you could insert logic into it. Without that, you'll need to use JS to insert the variable where you want it in the DOM.

Collectives™ on Stack Overflow

Using TypeScript Variable Inside Jquery Each Loop

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related