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个项目之后关闭当前的int[][] arr = {{1,2,3},{1,2,3},{1,2,3}};，然后打开一个新的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;
}

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

1 个答案: