html - API 样式 Javascript + HTML

Question

基本上我在面板/标题中使用引导 CSS

我有一个来自 Twitch.tv 的 Kraken 的 API，它可以抓取 3 个流

我的问题是它在一个框中显示了 3 个流

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>

如果有人可以给我任何指示，我会非常感激

Answer 1

您正在循环中将所有元素添加在一起。

重新创建元素并单独添加。

演示：http: //jsfiddle.net/82wNq/30/show/

代码：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); }