Creating a row for every second and fifth increment

Question

I have a grid and would like to create a row for every second and fifth increment in my for-loop. It would look something like 2,3,2,3...If I had, say 18 increments how could I achieve this? I tried using i % 3 === 0 || i % 5 === 0 i % 3 === 0 || i % 5 === 0 in the loop but get a variable result. Math isn't really my strong suit so help would greatly be appreciated

 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

You can consider of creating a counter variable,which starts with 1 and increment on every iteration,if it 2 or 5 run your logic and once counter becomes reset it back to 1 and run the same logic

check this snippet

 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> 

Hope it helps

Answer 2

Try this... It loses your mod calculations. The way you originally described it it, it would have run on every even instance (although your code had a 3 instead of a 2). Plus, the loop started on a zero count, so that would have been an issue as well.

 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>