0

I want to display whether a twitch username in my anchor link is online or offline. The problem is that I will have multiple usernames on the website, and my code only works for the first one.

var tnick = $('#ltwitch').data('tnick');
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
    if (c.stream == null) {
        $("#live").html("Offline");
    } else {
        $("#live").html("Online");
    }
});

This is my html: (can be changed)

<a id="ltwitch" href="#" data-tnick="name1">x</a> (<span id="live">...</span>)
<a id="ltwitch" href="#" data-tnick="name2">x</a> (<span id="live">...</span>)

Any help will be appreciated. Thanks.

Znk3
  • 45
  • 1
  • 7
  • 1
    ID's must be unique. You will need to select all instances of that element and iterate over them one by one. – Kevin B Jan 30 '14 at 16:49
  • Thanks, such a simple mistake... Can't believe I wrote down multiple ID's. – Znk3 Feb 09 '14 at 17:22

1 Answers1

1

http://jsfiddle.net/LYv3R/5/

jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
    var tnick = $(this).data('tnick');
    var span = $(this).next();
    $.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?",       function(c) {
        if (c.stream == null) {
            span.html("Offline");
        } else {
            span.html("Online");
        }
    });
});
});
Znk3
  • 45
  • 1
  • 7