$（this）セレクタをネストされた関数に渡す

Question

の親DIVの各Pタグを通過する必要のあるスクリプトを用意し、google translate APIを使用してそれぞれを翻訳します。

ユーザーはこの機能で、英語からスペイン語へのページを翻訳するためのリンクをクリックしたときに実行されるように：

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

問題がiIget内部関数へ$(this).html() comesbackのNULLであると私は変更することはできませんよ現在の要素htmlを新しい翻訳されたテキストに変更します。

私の質問は次のとおりです。 どのようにして、現在選択されている要素をネストされた関数に渡しますか？

おかげ

Answer 1

あなたはthisの値は常に関数が呼び出されるコンテキストに関連するローカル変数

でそれを格納することができます。あなたの例では、関数をgoogle.language.translateに渡しているので、その関数を呼び出すのはおそらくgoogle.language.translateです。

pのときに$(this)の値を格納すると、その変数をコールバック関数から使用できるようになります。

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は、そのコールバックでコンテキストを変更し、ちょうど/したいオブジェクト要素への参照を保持し、このようので、それはです：

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

適切にthisの記録を保存context - それ以外の場合はthisは親関数ではなく内部関数を参照します。

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

私はこのようにします。次に、それが何をしているのかを理解するために閉鎖を研究する。

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