使用javascript将n个div包装在一个父对象中

Question

I have list of html element which has been generated by javascript. Now Every 4 (could be different) should have one parent. The problem is how do we close the div after 4th element.

Here's a snippet (or here's a fiddle ):

 var x = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"] var html = ''; for (var i = 0; i < x.length; i++) { if (i % 3 === 0) { html += '<div class="parent">'; } html += '<div class="child">' + x[i] + '</div>' if (i % 3 !== 0 || i === (x.length - 1)) { html += '</div>'; } } document.getElementById('test').innerHTML = html 

 .child{ margin: 10px; background: green; float: left; padding: 20px} 

 <div id="test"></div> 

Answer 1

you can try something like this

 var x = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"] var html = ''; var i=0; while(i < x.length){ if (i % 3 === 0) { html += '<div class="parent">'; } html += '<div class="child">' + x[i] + '</div>' i++; if (i % 3 === 0 || i === (x.length - 1)) { html += '</div>'; } } if(i%3 !== 0){ html += '</div>'; } document.getElementById('test').innerHTML = html 

 .child{ margin: 10px; background: green; float: left; padding: 20px} 

 <div id="test"></div> 

Answer 2

You can loop through the array in groups of n fairly easily, using a for loop and slice :

 var x = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]; var html = ""; for (var i = 0; i < x.length; i += 4) { html += '<div class="parent">' + x.slice(i, i + 4).reduce(function(h, child) { return h + '<div class="child">' + child + '</div>'; }, "") + '</div>'; } document.getElementById("test").innerHTML = html; 

 .child{ margin: 10px; background: green; padding: 20px} .parent { border: 1px solid blue; } 

 <div id="test"></div> 

(I've removed the float from the CSS and added a parent border, just to make it obvious where the children are.)

Note that slice(i, i + 4) will work even at the end when there aren't four left.

(The reduce is just one way to combine all those children into one string.)

Answer 3

Using splice , you can get array of 4 elements, loop them and wrap them under the parent . splice helps you chunk the big array into number of smaller arrays:

 var x = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]; var html = ''; while (x.length > 0) { chunk = x.splice(0, 4) html += '<div class="parent">'; for (var i = 0; i < chunk.length; i++) { html += '<div class="child">' + chunk[i] + '</div>' } html += '</div>'; } document.getElementById('test').innerHTML = html 

 .child { margin: 10px; background: green; padding: 20px; } .parent { border: 1px solid black; padding: 4px; margin: 5px 0; } 

 <div id="test"></div> 

Answer 4

Instead of starting with i=0 in the for loop start with i=1 and end with i <= x.length . With this in place the logic should be straight forward.

Here is the code sample

 var x = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"] var html = ''; for (var i = 1; i <= x.length; i++) { if (i % 4 === 1) // if remainder is 1 it means the 1st element of the block, So open new parent html += '<div class="parent">'; html += '<div class="child">' + x[i - 1] + '</div>' if (i % 4 === 0 || i === x.length) // if remainder is 0 then we have completed 4 elements so close the parent html += '</div>'; } document.getElementById('test').innerHTML = html 

 .child {background: yellow;padding: 20px;display: block; flex: 1;} .parent {border: 2px solid green;margin: 10px;display: flex;} 

 <div id="test"></div> 

Edit

//if remainder is 0 then we have completed 4 elements so close the parent
//if we have reached the last element in the array then close the parent
  if (i % 4 === 0 || i === x.length) 
    html += '</div>';
}

Answer 5

you can change if (i % 3 !== 0 || i === (x.length - 1)) { to if (i % 3 === (3-1) || i === (x.length - 1)) { to resolve it by your idea

 var x = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"] var html = ''; for (var i = 0; i < x.length; i++) { if (i % 3 === 0) { html += '<div class="parent">'; } html += '<div class="child">' + x[i] + '</div>' if (i % 3 === (3-1) || i === (x.length - 1)) { html += '</div>'; } } document.getElementById('test').innerHTML = html 

 .child{ margin: 10px; background: green; float: left; padding: 20px} 

 <div id="test"></div>