Question

我有一个JavaScript对象文字数组，我正在尝试创建一个简单的for循环来获取所有信息。问题是我正在尝试使用If语句关闭并在连续超过4本书时重新打开div。但是当有超过4本书时，它会将这些div添加到书籍对象的每个实例中，为每个项目创建一行。我只是不能为我的生活认为正确的条件是只关闭每4本书重新开启div。

    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

如果你想在每第4本书后添加额外的HTML，那应该是：

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

i % 4计算i/4的余数，因此当0为i，0，4时为8，等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 % 4的值将从0变为3，然后随着i的增加再次从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>';
 }

Answer 4

使用另一个变量，每次变为3时，关闭div并将其清除为0：

for(var i = 0, k = 0; i < books.length; i++, k++){
 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 (k === 3) {
     bookInfo += '</div>"';
     bookInfo += '</div>"';
     bookInfo += '</div>"';
     bookInfo += '<div class="row">';
     bookInfo += '<div class="large-12 columns">';
     bookInfo += '<div id="books-go-here" class="row">';
     k = 0;
   }

 }

Answer 5

这是因为您要检查books数组长度是否大于4，如果是，则每个步骤都会关闭并重新打开。您需要按照以下步骤操作：

从1开始计算（var i = 1）
更新停止条件以说明; i <= books.length ;
将i（在每个迭代步骤中递增）除以4并检查该操作的剩余部分。

这会将您的代码更改为：

for(var i = 1; i <= books.length; i += 1){
  // process stuff, create dom strings
  if (i % 4 === 0) {
    // close divs
  }
}

如果这还不够明确，请告诉我。

for循环if语句混淆

5 个答案: