Supongamos que tengo una clase y un método each como el siguiente:
var dog { breed: "huskey", function printBreed(){ $("ul li").each(function() { $(this).html() = dog.breed; }); } } Hice que cada uno de los elementos de la lista de la página mostrara "huskey". Sin embargo, dentro de cada función, no puedo usar $(this).html() = this.breed; . Porque esto se referirá al elemento de la lista "li" en sí. Además, llamar al objeto por su nombre. ¿Hay una forma genérica de referirse al objeto como "esto".
Primero, consultemos una versión corregida de su código:
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. }) } }; La función de devolución de llamada de jQuery's each se llama con this enlace al elemento iterado actualmente. Obviamente, this no puede referirse tanto a su elemento como a su objeto dog al mismo tiempo.
each devolución de llamada recibe dos argumentos: el índice actual y el elemento iterado actualmente. Para ignorar this enlace de jQuery, simplemente use una función de flecha en lugar de una function de función. this se tomará entonces del ámbito léxico. Consulte ¿Cómo funciona la palabra clave "esto"? y Cómo acceder al correcto this dentro de una devolución de llamada para obtener más detalles.
El código de trabajo con jQuery se vería así:
const dog = { breed: "Husky", printBreed(){ $("ul li").each((index, element) => $(element).html(dog.breed)); } }; dog.printBreed(); Tenga en cuenta que each ciclo no es necesario en su caso. Simplemente podrías haber escrito el código así:
const dog = { breed: "Husky", printBreed(){ $("ul li").html(this.breed); } }; dog.printBreed(); Aún mejor: use .text en lugar de .html . Establecer HTML para texto sin formato es excesivo.
Incluso si la breed fuera diferente para cada <li> , .html acepta una función de devolución de llamada. Pero, ya sabes, usa las funciones de flecha según corresponda.
Por supuesto, no necesita jQuery , por lo que una versión estándar se ve así:
const dog = { breed: "Husky", printBreed(){ document.querySelectorAll("ul li").forEach((element) => element.textContent = this.breed); } } dog.printBreed();Puede almacenar una referencia:
var dog { breed: "huskey", function printBreed(){ var self = this; $("ul li").each(function() { $(this).html() = self.breed; }); } }Esta pregunta ha estado en mi mente también, resolví hacer
var dog { breed: "huskey", function printBreed(){ classThis = this $("ul li").each(function() { $(this).html() = classThis.breed; }); } }