如何获得每行8列？ [Javascript，Bootstrap]

Question

所以我在这里写了这个简单的功能，用于搜索电影并在dom中进行操作。这里的问题是当键入电影名称时，api响应至少返回20/30条推荐。并且我希望获取的数据得以分发每行8列。所以我写了这个函数：

Javascript部分：

 db.multisearch()
  .then(data=>{
     var div=document.getElementById('call');
     var output='';
for(let i=0;i<data.length;i++){
     var poster=data[i].poster_path;
     var title=data[i].title;

for(let j=0;j<=8;j++){
  output +=`<div class="col-sm">
  <div class="card mb-3">
      <img class="card-img-top" src='https://image.tmdb.org/t/p/w342//${poster}' alt="Card image cap">
      <div class="text-block"><p>${title}</p></div>
    </div>
  </div>`;
  }
 }
div.innerHTML=output;
});

我正在处理的HTML部分：

<section class="movie-page">
<div class="container">
  <div class="row" id="call"></div>
</div>

但是它并没有达到预期的效果，而是只重复播放一部电影8次。

我正在尝试使模型在每一行中都类似于此，而不重复任何电影：

我是新手，所以我可能错过了一些东西。 请帮忙。

Answer 1

您的循环应如下所示； 您需要在每第8个项目后关闭当前row ，然后打开一个新row 。

    var output = '<div class="row">';

    for(let j=1; j<=data.lenght; j++){

        output +=`<div class="col-xs-1">
            content into column
        </div> \n`;

        if(j !== 0 && j%8 === 0) {
            output += '</div><div class="row">';
        }
    }

   output += '</div>';

请参见下面的工作示例：

 var output = '<div class="row">'; for(let j = 1; j<= 50; j++){ output +=`<div class="col-xs-1"> ${j} </div> \\n`; if(j !== 0 && j%8 === 0) { output += '</div><div class="row">'; } } output += '</div>'; document.getElementById('container').innerHTML = output; 

 .row { margin-bottom: 10px; overflow: hidden; display: block; } .row .col-xs-1 { float: left; box-sizing: border-box; color: red; text-align: center; display: block; margin-bottom: 10px; width: 8.33%; padding: 10px; } 

 <div class="container" id="container"></div>