0

Basically I'm using bootstrap CSS with the panels / headers

I have an API going from Twitch.tv's Kraken that grabs 3 streams

My problem is it shows the 3 streams in the one box

http://jsfiddle.net/82wNq/28/

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"><div id="content1"></div> - <div id="content2"></div></h3>
  </div>
  <div class="panel-body">
    <div id="content3"></div>
  </div>
</div>

If anyone could give me any pointers I'd be really greatful

Gav
  • 37
  • 1
  • 1
  • 6
  • I don't understand the question. You ask JQuery to put all images into the #content3 div and that's just what it does. Do you mean you would like to see the images displayed side by side or something? – kuroi neko Jan 01 '14 at 10:08

1 Answers1

0

You are adding all elements together in loop.

Re-Create elements & add separately.

DEMO: http://jsfiddle.net/82wNq/30/show/

CODE: http://jsfiddle.net/82wNq/30/

    function (data) {
    var temp = "";
    $.each(data.streams, function (index, item) {
        temp = temp + "<div class='panel-heading'><h3 class='panel-title'></h3><div id='content1'>" + item.channel.display_name + "</div><div id='content2'>" + item.viewers + "</div></div><div class='panel-body'><div id='content3'><img src='" + item.preview.medium + "'/></div></div>";
    });
    $("#content").html(temp); }
VenomVendor
  • 15,064
  • 13
  • 65
  • 96
  • @Gav this will create duplicate `IDs` change `id='content1'` to `class='content1'`, similarly for other inner elements, have id only for parent, i.e `#content` I have misplaced `` in a hurry. – VenomVendor Jan 01 '14 at 10:16