for循環if語句混淆

Question

我有一個JavaScript對象文字數組，我試圖創建一個簡單的for循環來拉入所有的信息。問題是我試圖在連續超過4本書時使用If語句關閉並重新打開div。但是，如果有超過4本書，它會將這些div添加到書對象的每個實例中，爲每個項目創建一行。我只是不能爲我的生活認爲正確的條件是什麼，只會關閉每4本書重新開放divs。

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

你會使用模（%）操作：

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

的i % 4值會從0到3，然後從0重新開始爲i inscreases。除了第一次以外，每次值爲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 2

如果你想添加額外的每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 3

使用另一個變量，每次它得到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 4

那是因爲你檢查是否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 
    } 
} 

讓我知道這是不夠清晰。

Answer 5

看來你會有不匹配的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>"'; 
}