How do I access the class using "this" inside an each function of the class in jQuery?

Question

Suppose I have a class and an each method like the following:

var dog {
    breed: "huskey",
     
    function printBreed(){
      $("ul li").each(function() {
            $(this).html() = dog.breed;
        });
    }
}

I made each of the list item of the page display "huskey". However, inside the each function, I can't use $(this).html() = this.breed;. Because, this will refer to the list item "li" itself. Besides, calling the object by its name. Is there a generic way to refer to the object like "this".

Strongly related: [How to access the correct `this` inside a callback](/q/20279484/4642212), but in this case you’d have to know about the arguments that jQuery methods provide — which you can already do, by reading the [documentation](//api.jquery.com/each/). — Sebastian Simon, Aug 25 '21 at 22:27

Sebastian Simon · Accepted Answer · 2021-08-25T22:39:59.867

First, let’s refer to a corrected version of your code:

const dog = { // Use `const` instead of `var`; `=` was missing.
  breed: "Husky", // Spelling.
  printBreed(){ // `function` is invalid here, so use a method instead.
    $("ul li").each(function(){
      $(this).html(dog.breed); // Assignment to a method call is invalid; `html` accepts an argument to set the value.
    })
  }
};

The callback function of jQuery’s each is called with this bound to the currently iterated element. Obviously, this cannot refer to both your element and your dog object at the same time.

The each callback receives two arguments: the current index, and the currently iterated element. In order to ignore the this binding from jQuery, simply use an arrow function instead of a function function. this will then be taken from lexical scope. See How does the “this” keyword work? and How to access the correct this inside a callback for more details.

The working code with jQuery would look like this:

const dog = {
  breed: "Husky",
  printBreed(){
    $("ul li").each((index, element) => $(element).html(dog.breed));
  }
};

dog.printBreed();

Note that an each loop isn’t necessary in your case. You could’ve simply written the code like so:

const dog = {
  breed: "Husky",
  printBreed(){
    $("ul li").html(this.breed);
  }
};

dog.printBreed();

Even better: use .text instead of .html. Setting HTML for plain text is overkill.

Even if the breed was different for each <li>, .html accepts a function callback. But, you know, use arrow functions as appropriate.

Of course, You Don’t Need jQuery, so a vanilla version looks like this:

const dog = {
  breed: "Husky",
  printBreed(){
    document.querySelectorAll("ul li").forEach((element) => element.textContent = this.breed);
  }
}

dog.printBreed();

score 1 · Answer 2 · answered Aug 25 '21 at 22:20

1

You can store a reference:

var dog {
    breed: "huskey",
     
    function printBreed(){
      var self = this;
      $("ul li").each(function() {
            $(this).html() = self.breed;
        });
    }
}

answered Aug 25 '21 at 22:20

Amir MB

3,233
2
10
16

score 0 · Answer 3 · answered Aug 25 '21 at 22:21

This question has been on my mind too, I resolved to doing

var dog {
    breed: "huskey",
     
    function printBreed(){
        classThis  = this
      $("ul li").each(function() {
            $(this).html() = classThis.breed;
        });
    }
}

How do I access the class using "this" inside an each function of the class in jQuery?

3 Answers3