给二维数组的每个元素一个html ID

Question

如何添加我的二维数组中的每个元素的正在进行的HTML ID以便通过css访问每个元素？

https://jsfiddle.net/jc22Lopj/3/

var list = document.getElementById('werk'), 
li = document.createElement('li'), 
clone; 
werk.forEach(function (item) { 
clone = li.cloneNode(); 
clone.textContent = item; 
clone.className = "item"; 
list.appendChild(clone); 
}); 

我想只有一个阵列，以实现以下结构：

werk = [ 
[TextBla1,TextBla2], 
[TextBla3,TextBla4] 
] 

<ol id="werk"> 
<li class="item"> 
<div id="text1">TextBla1</div> 
<div id="text2">TextBla2</div> 
</li> 
<li class="item"> 
<div id="text3">TextBla3</div> 
<div id="text4">TextBla4</div> 
</li> 
</ol> 

我知道，我可以访问每一个元素像下面，但我不知道如何给每个元素一个特定的ID。

var list = document.getElementById('werk'), 
li = document.createElement('li'), 
clone; 
werk.forEach(function (item) { 
clone = li.cloneNode(); 
clone.textContent = item; 
clone.className = "item"; 
list.appendChild(clone); 

for (var i = 0; i < item.length; i++) { 
    alert(item[i]); ??? 
} 

}); 

Answer 1

只需要添加另外forEach因为item是你的文本数组

var werk = [["Text1","Text2"],["Text3","Text4"]], 
    list = document.getElementById('werk') 

werk.forEach(function (item) { 
    var clone = document.createElement('li'); 
    clone.className = "item"; 

    item.forEach(function(text) { 
     var div = document.createElement('div'); 
     div.setAttribute("id", text); 
     div.textContent = text; 
     clone.appendChild(div); 
    }); 

    list.appendChild(clone); 
});