Looping through array and grouping items with modulus - jquery

Question

I have an array of companies:

var list = ["company1", "company2", "company3", "company4", "company5", "company6"];

And I want to loop through the array and append a list of companies to the dom in groups of three. Like this:

<div class="row">
    <div class="col col-4">Company 1</div>
    <div class="col col-4">Company 2</div>
    <div class="col col-4">Company 3</div>
</div>
<div class="row">
    <div class="col col-4">Company 4</div>
    <div class="col col-4">Company 5</div>
    <div class="col col-4">Company 6</div>
</div>
<div class="row">
    <div class="col col-4">Company 7</div>
    <div class="col col-4">Company 8</div>
    <div class="col col-4">Company 9</div>
</div>

^ so this would be the ideal markup - that gets generated after the array is looped. Ideally I want to create an empty markup template - then read from that template then create markup in the js

My code:

 var list = ["company1", "company2", "company3", "company4", "company5", "company6"]; var itemWrapper = $('.wrapper'); var itemRow = itemWrapper.find('.row'); var itemCol = itemRow.find('.col').eq(0); console.log("itemRow", itemRow); console.log("itemCol", itemCol); itemWrapper.empty(); $.each(list, function(index, value) { console.log("index", index); console.log("value", value); if (index % 3 == 0) { console.log("-------new row"); $('.wrapper').append('<div class="row">'); } $('.wrapper').append(itemCol.html(value)); if (index % 3 == 0) { //$('.wrapper').append('</div>'); console.log("-------end row"); } }); /* if (index % 3 == 0) { console.log("new row"); modalWindow.partyContainer.append('<div class="row party-list">'); } console.log("modalWindow.itemRow", modalWindow.itemRow); var itemCol = $(modalWindow.itemRow).html(value.name); modalWindow.partyContainer.append(itemCol); if (index + 3 % 3 == 0) { console.log("end row"); modalWindow.partyContainer.append('</div>'); } if (index == 12) { return false; } */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="row"> <div class="col col-4">x</div> <div class="col col-4">c</div> <div class="col col-4">v</div> </div> </div> 

Answer 1

Simply append a new row using jQuery if the remainder is 0 and add <div> s accordingly.

 var list = ["company1", "company2", "company3", "company4", "company5", "company6"]; var itemWrapper = $('.wrapper'); itemWrapper.empty(); list.forEach(function(row, idx) { if(!(idx % 3)) { itemWrapper.append('<div class="row"></div'); } var itemRow = $('.wrapper .row:last-child'); itemRow.append('<div class="col col-4">'+row+'</div>'); }); 

 <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <div class="wrapper"> </div> 

Let me know if you have any questions. Hope this helps.

Answer 2

Just use a variable $row that will hold the current row element. Update that variable for each three elements with a new row element. And for each element, just append to the $row :

 var list = ["company1", "company2", "company3", "company4", "company5", "company6", "company7"]; var $wrapper = $('.wrapper'); $wrapper.empty(); var $row; // the current row of elements $.each(list, function(index, value) { if(index % 3 == 0) { // for every three elements $row = $('<div class="row"></div>').appendTo($wrapper); // create a new row element and assign it to $row } $row.append('<div class="col col-4">' + value + '</div>'); // add the current element to the current row }); 

 .row { margin: 10px 0; background: #eee; } .row > * { display: inline-block; margin: 0 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"></div> 

Answer 3

You can use array.slice to split the array for you and iterate over the chunks as in my example.

Is there a particular reason you want to use the existing HTML as a template?

 var list = ["company1", "company2", "company3", "company4", "company5", "company6", "company7", "company8", "company9", "company10"]; var itemWrapper = $('.wrapper'); var listChunks = []; var chunkSize = 3; for (var i = 0; i < list.length; i += chunkSize) { listChunks.push(list.slice(i,i+chunkSize)); } itemWrapper.empty(); var rowHtmlOpen = '<div class="row">'; var rowHtmlClose = '</div>'; listChunks.forEach(function (chunk) { var rowHtml = rowHtmlOpen; chunk.forEach(function (col) { rowHtml += '<div class="col col-4">' + col + '</div>' }); rowHtml += rowHtmlClose; itemWrapper.append(rowHtml); }); 

 .row { margin: 10px 0; background: #ffe; } .row > * { display: inline-block; margin: 0 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"></div> 

Answer 4

var list = ["company1", "company2", "company3", "company4", "company5", "company6"];
var wrapper = $('.wrapper');
var row = {};
$.each(list,function(key,val){
    if((key % 3) == 0){
        row = $('<div>', {'class' : 'row'});
        wrapper.append(row);
    }
    var col = $('<div>', {'class' : 'col col-4'});
    col.text(val);
    row.append(col);
});

Answer 5

Here is a version that uses just javascript. The logic gets the column and removes it from the DOM, so that it's text can be changed without effecting the DOM every time. It then builds a string with the html desired to take the place of the contents of the wrapper. At the very end it replaces the contents of the wrapper with the whole result. Building the html, rather than elements, removes some overhead, and changing the wrapper at the very end limits the number of times the DOM is changed, both of which are performance gains.

EDIT: Made a small modification. I added an additional company name so the array is not evenly divisible by 3, and then I modified the closing logic to add the if the element is the last one, regardless, so the html is always properly closed.

 var list = ["company1", "company2", "company3", "company4", "company5", "company6", "company7"]; var itemWrapper = document.querySelector('.wrapper'); var itemColumn = itemWrapper.querySelector('.col'); var output = ''; itemColumn.parentNode.removeChild(itemColumn); list.forEach(function(company, index){ if (index % 3 === 0) output += '<div class="row">'; itemColumn.innerText = company; output += itemColumn.outerHTML; if (++index % 3 === 0 || index === list.length) output += '</div>'; }); itemWrapper.innerHTML = output; 

 <div class="wrapper"> <div class="row"> <div class="col col-4">x</div> <div class="col col-4">c</div> <div class="col col-4">v</div> </div> </div>