Question

我正在使用Google表格填充我网站上的数据，与我所属的联盟相关。除了一个非常小的方面，一切都很好。我一直在网上寻找一种方法来做到这一点，似乎无法找到一种资源，让我有办法做到这一点。

我在网站上使用Bootstrap 4，并使用卡片显示我的数据。使用Card-Deck功能，我正在尝试按团队建立一组名单，以便联盟玩家可以看到谁在团队中。这可以按预期工作并构建一行卡片。我想要做的事情就是连续只有3张牌，因为它真的可以用更多的数据来获取数据，而且我们有最多16支球队的联赛。

这是我的javascript：

＆＃13;

// make JSON call to Google Data API
$.getJSON(url, function(data) {

  //Build the Card Group
  var cardstart = '';
  cardstart += '<div class="card-deck">';

  var cardend = '';
  cardend += '</div>';

  //Build the Sunday Juniors Rosters
  var sunjunroster = '';

  //Loop to build the html output for team name
  var entrysunjunroster = data.feed.entry;
  for (var ia = 0; ia < entrysunjunroster.length; ia++) {
    if (entrysunjunroster[ia]['gsx$night']['$t'] == "sunday" && entrysunjunroster[ia]['gsx$format']['$t'] == "juniors") {
      sunjunroster += '<div class="card border border-dark mb-3">';
      sunjunroster += '<h4 class="card-header bg-bcaprimary text-light text-center">' + entrysunjunroster[ia]['gsx$teamname']['$t'] + '</h4>';
      sunjunroster += '<div class="card-body p-0">';
      sunjunroster += '<table class="table table-sm mb-0 tablesorter table-striped"><tbody>';
      if (entrysunjunroster[ia]['gsx$p1']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p1']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p2']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p2']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p3']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p3']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p4']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p4']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p5']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p5']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p6']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p6']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p7']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p7']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p8']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p8']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p9']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p9']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p10']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p10']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p11']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p11']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p12']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p12']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p13']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p13']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p14']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p14']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p15']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p15']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p16']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p16']['$t'] + '</td></tr>';
      }
      sunjunroster += '</tbody></table></div></div>';
    }
  }

  // output html - Sunday Juniors	
  $('.sunjunroster').html(cardstart + sunjunroster + cardend);

});

＆＃13;

并在我的页面上构建这个html：

＆＃13;

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="sunjunroster"></div>
    </div>
  </div>
</div>

＆＃13;

我知道使用PHP，您可以计算查询中返回的项目并插入一行代码，然后继续查询。这就是我想在这里做的事。

它将获取计数，在3个项目之后，它会关闭col和row div，并将它们重新添加以开始新行。

所以它会插入这段代码：

＆＃13;

</div></div><div class="row"><div class="col">

＆＃13;

然后从JSON数组继续构建。

Answer 1

使用模运算符%。它返回除法的余数。可分为3的整数的余数始终为0，因此我们可以利用这个优势。

for (var ia = 0; ia < entrysunjunroster.length; ia++) {
   if (ia % 3 == 0 && ia > 0)
   {
        sunjunroster += '</div></div><div class="row"><div class="col">';
   }
   else if (ia == 0) //expection for zero index, nothing to close
   {
        sunjunroster += '<div class="row"><div class="col">';
   }

   //rest of your code...
}

Javascript JSON返回3项后插入新行

1 个答案: