爲每第二個和第五個增量創建一行

我有一個網格，並希望爲for循環中的每第二個和第五個增量創建一行。它看起來像2,3,2,3 ...如果我有，說18增量我怎麼能做到這一點？我嘗試在循環中使用i % 3 === 0 || i % 5 === 0，但得到一個變量結果。數學是不是我的強項，從而幫助將大大理解爲每第二個和第五個增量創建一行

var container = document.querySelector('.container'); 
 
var frag = document.createDocumentFragment(); 
 

 
for (var i = 0; i < 18; i++) { 
 
    var span = document.createElement('div'); 
 
    span.classList.add('span'); 
 

 
    if (i % 3 === 0 || i % 5 === 0) { 
 
    var row = document.createElement('div'); 
 
    row.classList.add('row'); 
 
    frag.appendChild(row) 
 
    } 
 

 
    if (i % 5 === 0) { 
 
    span.classList.add('span8') 
 
    } else { 
 
    span.classList.add('span4'); 
 
    } 
 

 
    row.appendChild(span); 
 
} 
 

 
container.appendChild(frag)

.row { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.row:not(last-of-type) { 
 
    margin-bottom: 20px; 
 
} 
 

 
.span { 
 
    border: 1px solid black; 
 
    margin: 0 4px; 
 
    height: 100px; 
 
} 
 

 
.span8 { 
 
    flex: 1; 
 
} 
 

 
.span4 { 
 
    flex: .5; 
 
}

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

來源

2016-12-14 Carl Edwards

* 「每一個第二和第五」 *不走*'I％3 === 0 ||我％5 === 0' * - 你想每秒或每三分之一？ – nnnnnn

你的「每秒增量」模數會在所有偶數元素上觸發，所以這不起作用。我會用一個計數器檢查來發佈一個答案，並在連續的行上進行交換。 – Tony

嘗試......它失去了你的MOD計算。你最初描述它的方式，它將在每個偶數實例上運行（儘管你的代碼有3個而不是2個）。此外，循環開始零計數，所以這也是一個問題。

var container = document.querySelector('.container'); 
 
var frag = document.createDocumentFragment(); 
 
var colset = 2; 
 
var colcounter = 0; 
 
var row = document.createElement('div'); 
 
row.classList.add('row'); 
 

 
for (var i = 0; i < 18; i++) { 
 
    colcounter++; 
 
    var span = document.createElement('div'); 
 
    span.classList.add('span'); 
 
    if (i % 5 === 0) { 
 
    span.classList.add('span8'); 
 
    } else { 
 
    span.classList.add('span4'); 
 
    } 
 
    span.insertAdjacentHTML('beforeend', i); 
 
    row.appendChild(span); 
 
    if (colcounter === colset) { 
 
    frag.appendChild(row); 
 
    colcounter = 0; 
 
    colset = ((colset === 3) ? 2 : 3); 
 
    var row = document.createElement('div'); 
 
    row.classList.add('row'); 
 
    } 
 
} 
 
if (colcounter > 0) { 
 
    frag.appendChild(row); 
 
} 
 
container.appendChild(frag);

.row { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.row:not(last-of-type) { 
 
    margin-bottom: 20px; 
 
} 
 

 
.span { 
 
    border: 1px solid black; 
 
    margin: 0 4px; 
 
    height: 100px; 
 
} 
 

 
.span8 { 
 
    flex: 1; 
 
} 
 

 
.span4 { 
 
    flex: .5; 
 
}

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

來源

2016-12-14 07:19:52 Tony

感謝您的回覆。只是幾個問題。最後一個條件的目的是什麼以及它爲什麼存在**循環外部？最初我爲每個奇數行的第一個跨度設置了一個span8類，以適合我當前的引導程序網格。我還能用上面的代碼來完成這個嗎？ –

最後一個條件的目的是捕獲在該行中留下但尚未發佈到'frag'的任何雜散跨度。它在循環之外，因爲元素生成循環已完成。如果計數器大於零，額外的跨度仍然等待放置在碎片中。另外，我實際上在代碼中看到一個錯誤（很難相信：P）並修復了它。 – Tony

很感謝。錯誤是什麼？ –

您可以考慮創建一個計數器變量，這與1和增量開始在每次迭代的，如果2或5運行你的邏輯，一旦計數器變爲重置回它1並運行相同的邏輯

檢查這個片段

var container = document.querySelector('.container'); 
 
var frag = document.createDocumentFragment(); 
 
var count = 1; 
 
for (var i = 0; i < 18; i++) { 
 

 
    var span = document.createElement('div'); 
 
    span.classList.add('span'); 
 

 
    if (count == 2 || count == 5) { 
 
    var row = document.createElement('div'); 
 
    row.classList.add('row'); 
 
    frag.appendChild(row); 
 

 

 
    if (count == 5) { 
 
     span.classList.add('span8'); 
 
     count = 1; 
 
    } else if (count == 2) { 
 
     span.classList.add('span4'); 
 
    } 
 
    row.append(span); 
 
    } 
 
    count++; 
 

 

 
} 
 

 
container.append(frag);

.row { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 
.row:not(last-of-type) { 
 
    margin-bottom: 20px; 
 
} 
 
.span { 
 
    border: 1px solid black; 
 
    margin: 0 4px; 
 
    height: 100px; 
 
} 
 
.span8 { 
 
    flex: 1; 
 
} 
 
.span4 { 
 
    flex: .5; 
 
}

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

希望它可以幫助

來源

2016-12-14 05:35:03 Geeky

爲每第二個和第五個增量創建一行

回答

相關問題