JS 样式 3 每行答案

【问题标题】：JS styling 3 per lineJS 样式 3 每行
【发布时间】：2014-01-30 01:01:09
【问题描述】：

我正在尝试这样做，所以一行有 3 个，然后是一个休息，然后是 3 个，然后是一个休息等等。

有什么帮助吗？

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
    var t = "";
    $.each(e.streams, function (e, n) {
        t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>"
    });
    $("#content").html(t)
})

例子：

http://i.stack.imgur.com/h0xvX.gif

【问题讨论】：

标签： javascript php api styling twitch

【解决方案1】：

DEMO

创建 3 个不同的 content div 而不是 1 个

<div id="content1" class="panel panel-default"></div>
<div id="content2" class="panel panel-default"></div>
<div id="content3" class="panel panel-default"></div>

为这些 div 设置样式

.panel.panel-default {
    width:430px;
    display:inline-block;
}

相应地分配结果

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
    var t = u = v = "";
    $.each(e.streams, function (e, n) {
        switch ((e + 1) % 3) {
            case 1:
                t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
                break;
            case 2:
                u = u + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
                break;
            case 3:
            default:
                v = v + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
                break;
        }
    });
    $("#content1").html(t);
    $("#content2").html(u);
    $("#content3").html(v);
})

【讨论】：