Utilizing TypeScript Variables within a Jquery Each Iteration

Question

Utilizing TypeScript Variables within a Jquery Each Iteration

I have a variable named tableIndexNumber that I need to use in different methods. When trying to access this variable, I use "this.tableIndexNumber" and it works fine. However, I face an issue when using it inside a jQuery each loop because the HTML elements are also defined as "this" within the loop. What should be my approach in this situation?

export class TablesComponent implements OnInit {

tableIndexNumber = 1;

constructor() { }

change(col: number) {

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

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

    $(this).addClass('boxSelected');
    // here is where the problem occurs with this.tableIndexNumber ++
    
  } else {
    $(this).removeClass('boxSelected').addClass('box');
  }
});

}

javascript jquery typescript

Answer 1

Answer №1

In the past, a common practice for handling this situation was to store this in a variable before the each function was called - often naming it "context" or "that", and then using that variable. However, with the introduction of arrow functions, there is now a more elegant solution as they do not have their own this context.

UPDATE: It seems I overlooked the syntax for each. It turns out you actually require the internal this, which means an arrow function won't suffice. Instead, you can resolve this issue by storing the outer this in 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');
          }
        });
    }
}

Answer 2

In the past, a common practice for handling this situation was to store this in a variable before the each function was called - often naming it "context" or "that", and then using that variable. However, with the introduction of arrow functions, there is now a more elegant solution as they do not have their own this context.

UPDATE: It seems I overlooked the syntax for each. It turns out you actually require the internal this, which means an arrow function won't suffice. Instead, you can resolve this issue by storing the outer this in 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');
          }
        });
    }
}

Utilizing TypeScript Variables within a Jquery Each Iteration

Answer №1

Similar questions

When clicking on the side-bar, it does not respond as expected

Learn the best practices for incorporating jQuery and other JavaScript libraries in your Angular2 projects

What is the best way to verify the success of two ajax requests?

generate code to automatically output the content of a website

Click here for a hyperlink with an underline that is the same width

Concealing a division element if there is no content inside of it

Is there a way to increase the size of the icon without altering the dimensions of the button?

Encountering an unforeseen change in the "buttonText" attribute

Vue 2 draggable does not maintain reactivity when the v-model value consists of a parent tag's iterable

Utilizing Sequelize to establish associations between tables based on non-primary key columns

Pause and continue scrolling through the page with the push of a button

Different approach for searching and modifying nested arrays within objects

Communication between Nodemailer and Mailgun

What is the best way to organize large amounts of data into an array?

Please enter a numerical value into the input field in a JavaScript form

Removing Multiple Object Properties in React: A Step-by-Step Guide

The `react-hover` npm package functions flawlessly in the development environment despite being excluded from the production build

Transferring a variable after a successful jQuery call

Adding a combination of HTML and Javascript to an element can result in unexpected behavior

What is the best way to execute a specific set of unit tests in Gulp-Angular using Karma?