CODEWITHSUNDEEP
javascriptjquery
Rongeegee
Rongeegee

Reputation: 1128

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

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".

Upvotes: 1

Views: 437

Answers (3)

Sebastian Simon
Sebastian Simon

Reputation: 19485

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();

Upvotes: 2

Dave Mcsavvy
Dave Mcsavvy

Reputation: 520

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;
        });
    }
}

Upvotes: 0

Amir MB
Amir MB

Reputation: 3418

You can store a reference:

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

Upvotes: 1

Related Questions