每第二和第五个增量创建一行

Question

我有一个网格，想为我的for循环中的第二和第五个增量创建一行。 看起来像2,3,2,3 ...如果我有，说18个增量，我怎么能做到这一点？ 我尝试使用i % 3 === 0 || i % 5 === 0 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> 

Answer 1

您可以考虑创建一个计数器变量，该变量以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> 

希望能帮助到你

Answer 2

试试这个...它会丢失您的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>