For循环if语句混淆

Question

我有一个JavaScript对象文字数组，我正在尝试创建一个简单的for循环来拉入所有信息。问题是，当一行中有超过4本书时，我试图使用if语句来关闭和重新打开div。但是当有超过4本书时，它会将这些div添加到book对象的每个实例中，为每个项目创建一行。我就是想不出正确的情况是什么，每隔4本书就会关闭一次再重新打开一次。

    var bookInfo = '';
    var book;


   function print(bookInfo) {
     var outputDiv = document.getElementById('books-go-here');
     outputDiv.innerHTML = bookInfo;
   }

    for(var i = 0; i < books.length; i += 1){
     book = books[i];
     bookInfo += '<div class="large-3 small-6 columns output">';
     bookInfo += '<img src="' + book.image + '"/>';
     bookInfo += '<div class="panel">';
     bookInfo += '<h2>' + book.name + '</h2>';
     bookInfo += '<p>' + book.description + '</p>';
     bookInfo += '</div>';
     bookInfo += '</div>';
     // return bookInfo;
      if (books.length > 4) {
         bookInfo += '</div>"';
         bookInfo += '</div>"';
         bookInfo += '</div>"';
         bookInfo += '<div class="row">';
         bookInfo += '<div class="large-12 columns">';
         bookInfo += '<div id="books-go-here" class="row">';
       }

     }
   print(bookInfo);

任何帮助都是非常感谢的，因为这真的在此刻让我的大脑酸痛。

Answer 1

如果你想在每四本书之后添加额外的HTML，它应该是：

if (i > 0 && i % 4 == 0)

i % 4计算i/4的其余部分，因此当i为0、4、8等时，它为0。i > 0测试防止它在第一本书之前关闭。

您还应该将此代码放在for循环的开头，而不是结尾。由于计数是从0开始的，所以在您打印了4本书之后，下一次迭代将具有i = 4。

此外，当循环完成时，您需要关闭最后一行。这应该检查if (books.length > 0) (如果有0本书，循环将不会创建任何行，所以没有要关闭的内容)。

Answer 2

你可能会有不匹配的div标签。你可以这样做：

for(var i = 0; i < books.length; i += 1){
 book = books[i];
  if (i % 4 == 0) {
     bookInfo += '<div class="row">';
     bookInfo += '<div class="large-12 columns">';
     bookInfo += '<div id="books-go-here" class="row">';
  }
 bookInfo += '<div class="large-3 small-6 columns output">';
 bookInfo += '<img src="' + book.image + '"/>';
 bookInfo += '<div class="panel">';
 bookInfo += '<h2>' + book.name + '</h2>';
 bookInfo += '<p>' + book.description + '</p>';
 bookInfo += '</div>';
 bookInfo += '</div>';
 // return bookInfo;
  if ((i+1) % 4 == 0) {
     bookInfo += '</div>"';
     bookInfo += '</div>"';
     bookInfo += '</div>"';
   }

 }

 if (books.length % 4 != 0){
     bookInfo += '</div>"';
     bookInfo += '</div>"';
     bookInfo += '</div>"';
 }

Answer 3

您将使用模运算符(%)：

if (i > 0 && i % 4 == 0) {

随着i的增加，i % 4的值将从0变为3，然后再次从0开始。每次值为0时，您都想创建一个新行，除非是第一次。

此外，您还希望在循环中代码的开头执行此操作，以便在每行中的第一项之前创建一个新行：

for(var i = 0; i < books.length; i += 1){
  if (i > 0 && i % 4 == 0) {
     bookInfo += '</div>"';
     bookInfo += '</div>"';
     bookInfo += '</div>"';
     bookInfo += '<div class="row">';
     bookInfo += '<div class="large-12 columns">';
     bookInfo += '<div id="books-go-here" class="row">';
   }
   book = books[i];
   bookInfo += '<div class="large-3 small-6 columns output">';
   bookInfo += '<img src="' + book.image + '"/>';
   bookInfo += '<div class="panel">';
   bookInfo += '<h2>' + book.name + '</h2>';
   bookInfo += '<p>' + book.description + '</p>';
   bookInfo += '</div>';
   bookInfo += '</div>';
 }