將每個新類型的子包裝成一行

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

你應該做的，是當你檢查孩子是否不符合項目。形式一樣，你應該添加結束</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/

Answer 2

而不是雜亂的文本操作，你可以使用document.createElement做得更乾淨。有a great answer to this SO question，大約使用createElement的好處會談VS添加一個字符串innerHTML

var child = ""; 
var html = document.getElementById('html'); 
var node; 

items.forEach(function(item) { 
    if (child !== item.type) { 
    if (node) { 
     html.appendChild(node); 
    } 
    node = document.createElement('div'); 
    } 
    var newElem = document.createElement('div'); 
    newElem.innerHTML = item.name; 
    node.appendChild(newElem); 

    child = item.type; 

}); 

html.appendChild(node); 

Fiddle

Answer 3

你可以試試這個， https://jsfiddle.net/trupti11/0sz9xpxq/4/

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

    }) 
    html += '</div>';