jqueryがこのセレクタを使用して表示するdivを取得できません

Question

私のデータベース内のユーザのリストをTwitch APIに問い合わせて、オンラインであるかどうかを確認しています。

私は基本的に「表示：なし」で、それらすべてを一覧表示していますし、オンラインならば非表示解除：私のテストで

$('.online_list').each(function (index) { 
     var tnick = $(this).data('tnick'); 
    $.getJSON("https://api.twitch.tv/kraken/streams?client_id={:twitch_key}&channel="+tnick+"", function(a) { 
     if (a["streams"].length > 0) 
     { 
     alert(tnick); 
     $(this).show(); 
     console.log(index + ": " + $(this).text()); 
     } 
    }); 
    }); 

、完全にalert(tnick)作品なので、私はそれが実行している知っています。問題は$(this).show();が機能していないことです。

<div class="online_list" data-tnick="test" style="display: none;">test:<a href="https://www.twitch.tv/test">Twitch</a> <span>(Online)</span></div> 
<div class="online_list" data-tnick="test2" style="display: none;">test2:<a href="https://www.twitch.tv/test2">Twitch</a> <span>(Online)</span></div> 

Answer 1

thisは、現在のスコープのオブジェクトである：ここで

は、例えば、HTMLです！あなたは次の操作を行うことができ、あなたのコードを修正する

：

$('.online_list').each(function (index) { 
    var $that = $(this); // create a temp var that 
    var tnick = $that.data('tnick'); 
    $.getJSON("https://api.twitch.tv/kraken/streams?client_id={:twitch_key}&channel="+tnick+"", function(a) { 
     if (a && a["streams"] && a["streams"].length > 0) { 
     alert(tnick); 
     $that.show(); // use that instead of this 
     console.log(index + ": " + $that.text()); 
     } 
    }); 
    }); 

範囲&についての詳細は、このために、このリソースをチェックアウト：http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

Answer 2

EDIT：また

、@djxakが示唆のようにあなたはコールバックのelementパラメータを使用することができます。これは、私の意見ではもっとシンプルでクリーンです。

@djxakが示唆：jQueryのドキュメント内の各機能について

$('.online_list').each(function (index) { 
     //... (scope1 code) 
     var $current = $(this); 
     $.getJSON("", function(a) { 
     //... (scope2 code) 
     $current.show(); 
     }); 
    }); 

情報とelementパラメータ：

$('.online_list').each(function (index, element) { 
     //... (scope1 code) 
     $.getJSON("", function(a) { 
      //... (scope2 code) 
      $(element).show(); 
     }); 
    }); 

私のアプローチhttps://api.jquery.com/each/#each-function