javascript - 将每个新型 child 包裹成一排

Question

每个相同的子类型都应该包含在 div 中。问题是我得到的是包含所有子项的单个数组。所以我在它上面运行循环并尝试创建新的 div 并在子类型更改时关闭它但它写得不好。

fiddle

var items = [{
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child2",
  "name": "2 "
}, {
  "type": "child2",
  "name": "2"
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3"
}]
var child = "";
var html = ''

items.forEach(function(item) {
  if (child !== item.type) {
    html += '<div>'
  }
  html += '<div>' + item.name + ' </div>';
  if (child !== item.type && child) {
    html += '</div>'
  }
  child = item.type;

})

document.getElementById('html').innerHTML = html;

div { border:1px solid black }

<div id="html"></div>

Answer 1

你应该做的是，当你检查child是否与item.type不一样时，你应该添加一个结束</div>和一个新的开放<div>

items.forEach(function(item) {
 if(child != item.type){
    html += '</div>';
    html += '<div>';
 }
 html += '<div>' + item.name + ' </div>';
 child = item.type;
})

演示:https://jsfiddle.net/0sz9xpxq/2/