Question

我有由javascript生成的html元素列表。现在每4个（可能不同）应该有一个父母。问题是如何在第4个元素之后关闭div。

这是一个片段（或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

你可以尝试这样的事情

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

您可以使用n循环和for非常轻松地在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>

（我已从CSS中删除float并添加了父边框，只是为了让孩子们明白这一点。）

请注意，slice(i, i + 4)即使在最后没有剩下四个时也能正常工作。

（reduce只是将所有这些孩子组合成一个字符串的一种方法。）

Answer 3

使用splice，您可以获得4个元素的数组，循环它们并将它们包装在parent下。 splice帮助您将大数组分成多个较小的数组：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

而不是从for {循环中的i=1开始，而不是i <= x.length，而是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。有了这个，逻辑应该是直截了当的。

以下是代码示例

＆＃13;

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

＆＃13;

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

＆＃13;

//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>';
}

＆＃13;

修改

{ "id" : 1, "name" : "john", "phone" : { "work": "123456789", "home" : "987654321", "mobile" : "049876543" } }

Answer 5

您可以将awk更改为if (i % 3 !== 0 || i === (x.length - 1)) {，以便通过您的想法解决问题

＆＃13;

if (i % 3 === (3-1) || i === (x.length - 1)) {

＆＃13;

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

＆＃13;

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

＆＃13;

使用javascript在一个父级中包装n个div

5 个答案: