jQuery无法使用此选择器显示div

Question

I am querying the Twitch API for a list of users in my database, to see if they are online.

I am essentially listing them all, with "display: none" and then unhiding if online:

  $('.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());
      }
    });
  });

In my testing, the alert(tnick) works perfectly, so I know it's running. The problem is $(this).show(); just isn't working.

Here's example HTML:

<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 is the current scope object!

to fix your code you can do the following:

$('.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());
      }
    });
  });

Check out this resource for more information on scope & this: http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

Answer 2

EDIT:

Also, like @djxak suggests, you can use the element parameter of the callback, that is more simple and clean in my opinion.

The @djxak suggests:

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

My approach:

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

Info about each function and element parameter in jQuery docs: https://api.jquery.com/each/#each-function