Passing $ (this) selector to nested functions

Question

So, I have a script where you need to go through the P tag in the parent DIV with the entry-content class name and translate each of them using the Google translation API.

Therefore, when the user clicks the link to translate the page from English into Spanish, this function is launched:

 function spanish() { $(".entry-content p").each(function(){ var text = $(this).html(); google.language.detect(text, function(result) { google.language.translate(text, "en", "es", function(result) { if (result.translation) { alert($(this).html()); //outputs NULL $(this).html(result.translation); //doesn't work } }); }); }); } 

The problem is that iIget for the inner function $(this).html() returns NULL, and I cannot change the current html elements to change it to the new translated text.

So, I think, my question is: How do I pass the currently selected item to nested functions?

thanks

Answer 1

You can save it in a local variable

The value this will always refer to the context in which the function is called. In your example, you pass the function google.language.translate , and so it is supposedly calling google.language.translate this function.

However, if you save the value of $(this) when it is your p , you can use this variable from the callback function.

 function spanish() { $(".entry-content p").each(function(){ var $this = $(this); var text = $this.html(); google.language.detect(text, function(result) { google.language.translate(text, "en", "es", function(result) { if (result.translation) { alert($this.html()); //outputs NULL $this.html(result.translation); //doesn't work } }); }); }); } 

Answer 2

This is because this changes the context in this callback, just keep a reference to the element / object you want, for example:

 function spanish() { $(".entry-content p").each(function(){ var text = $(this).html(), self = this; google.language.detect(text, function(result) { google.language.translate(text, "en", "es", function(result) { if (result.translation) { $(self).html(result.translation); } }); }); }); } 

Answer 3

Save the 'this' entry in the appropriate context - otherwise this refers to an internal function, not the parent function.

 function spanish() { $(".entry-content p").each(function(){ // Save a record of 'this' in the proper context. var me = this; var text = $(this).html(); google.language.detect(text, function(result) { google.language.translate(text, "en", "es", function(result) { if (result.translation) { alert($(me).html()); $(me).html(result.translation); } }); }); }); } 

Answer 4

I would do something like this. Then examine the closure to understand what he is doing.

 function spanish() { $(".entry-content p").each(function(){ var $this = this; // new var text = $(this).html(); google.language.detect(text, function(result) { google.language.translate(text, "en", "es", function(result) { if (result.translation) { alert($(this).html()); //outputs NULL $this.html(result.translation); } }); }); }); }