嵌套數組/對象創建html？

Question

var bbcodes = 
[{ 
    contents: { 
    newBB:["b","u","i","list"], 
    newBB:["j","k","l","m"], 
    newBB:["close","stop","back","time"], 
    }, 
}]; 


for(var j=0;j<bbcodes;j++){ 
    var temp= '<span class="button_wrap">'; 
    for (var i=0;i<bbcodes.contents.newBB.length;i++){ 
     temp += '<span class="easy_edit_button easy_button_' 
     +bbcodes[j].contents.newBB[j]+'">' 
     +bbcodes[j].contents.newBB[j]+'</span><br />'; 
    } 
} 
$('body').append(temp+'</span>'); 

http://jsbin.com/equfow/1/edit

我想到底

<span class="button_wrap"> 
    <span class="easy_edit_button easy_button_b">b</span> 
    <span class="easy_edit_button easy_button_i">i</span> 
    <span class="easy_edit_button easy_button_u">u</span> 
    <span class="easy_edit_button easy_button_list">list</span> 
</span> 
<span class="button_wrap"> 
    <span class="easy_edit_button easy_button_j">j</span> 
    <span class="easy_edit_button easy_button_k">k</span> 
    <span class="easy_edit_button easy_button_l">l</span> 
    <span class="easy_edit_button easy_button_m">m</span> 
</span> 
<span class="button_wrap"> 
    <span class="easy_edit_button easy_button_close">close</span> 
    <span class="easy_edit_button easy_button_stop">stop</span> 
    <span class="easy_edit_button easy_button_back">back</span> 
    <span class="easy_edit_button easy_button_time">time</span> 
</span> 

只是有困難的時候得到的數組和對象的循環工作，我想創造這個HTML標記???

Answer 1

如果我認爲您建議，只要產生您發佈的正確標記，就不會限制bbcodes的格式。然後，我會重新構造它，如下所示，並使用普通的舊javascript生成標記。

的Javascript

var bbcodes = [ 
    ["b", "u", "i", "list"], 
    ["j", "k", "l", "m"], 
    ["close", "stop", "back", "time"] 
]; 


bbcodes.forEach(function (group) { 
    var wrap = document.createElement("span"); 

    wrap.className = "button_wrap"; 

    group.forEach(function (item) { 
     var button = document.createElement("span"); 

     button.className = "easy_edit_button easy_button_" + item; 
     button.textContent = item; 

     wrap.appendChild(button); 
    }); 

    document.body.appendChild(wrap); 
}); 

在jsfiddle

爲什麼？如果數據是固定的，那麼您不需要所有額外的對象，因爲您需要多次使用相同的「密鑰」，因此它需要具有唯一性。

這是使用Array.forEach，它可以很容易地shimmed或者你可以改變while或for循環。

更新：如果你不喜歡墊片，那麼這裏就是以上，但轉化爲while循環，這是跨瀏覽器友好無需墊片。並使用document.createTextNode而不是Node.textContent。

的Javascript

var bbcodes = [ 
     ["b", "u", "i", "list"], 
     ["j", "k", "l", "m"], 
     ["close", "stop", "back", "time"] 
    ], 
    bbcodesLength = bbcodes.length, 
    bbcodesIndex = 0, 
    groupLength, 
    groupIndex, 
    group, 
    item, 
    wrap, 
    button, 
    text; 

while (bbcodesIndex < bbcodesLength) { 
    group = bbcodes[bbcodesIndex]; 
    wrap = document.createElement("span"); 
    wrap.className = "button_wrap"; 
    groupLength = group.length; 
    groupIndex = 0; 
    while (groupIndex < groupLength) { 
     item = group[groupIndex]; 
     text = document.createTextNode(item); 
     button = document.createElement("span"); 
     button.className = "easy_edit_button easy_button_" + item; 
     button.appendChild(text); 
     wrap.appendChild(button); 
     groupIndex += 1; 
    } 

    document.body.appendChild(wrap); 
    bbcodesIndex += 1; 
} 

在jsfiddle

Answer 2

var bbcodes = 
[{ 
    contents: { 
    new:["b","u","i","list"], 
    new:["j","k","l","m"], 
    new:["close","stop","back","time"], 
    }, 
}]; 

該對象無法正常工作。您不能使用相同的密鑰3次。這應該是一個簡單的二維數組。

$('body').append(temp+'</span>'); 

由於jQuery似乎可用，所以有更簡單的方法來做到這一點。

讓我們試試這個

var bbcodes = [ 
    ["b","u","i","list"], 
    ["j","k","l","m"], 
    ["close","stop","back","time"] 
]; 
var i,j,innerspan,outerspan,currentVal,classStr; 
for(j=0;j<bbcodes.length;j++){ 

    outerSpan = $("<span>").addClass("button_wrap"); 

    for (i=0;i<bbcodes[j].length;i++){ 

     currentVal = bbcodes[j][i]; 
     classStr = "easy_edit_button easy_button_"+currentVal; 
     innerspan = $("<span>").addClass(classStr).html(currentVal); 
     outerSpan.append(innerspan); //add the inner span to the container span 
    } 
    $("body").append(outerSpan) // add each container span to the body. 
} 

工作小提琴：http://jsfiddle.net/EqjBq/

甚至有更好的方法可以做到這類型的使用MV的事情嗎？像KnockoutJS或Angular這樣的圖書館。如果您要一直隱藏/顯示基於JS對象的值的DOM元素，您可能需要查看其中的一個。

Answer 3

的陣列連接方法是你的朋友對這樣的問題。如果不是需要調整每個班級，我甚至不需要內部循環。當您不需要添加唯一屬性時，它特別強大且簡潔，用於創建表和列表。

var bbcodes = 
[ 
    ["b","u","i","list"], 
    ["j","k","l","m"], 
    ["close","stop","back","time"] 
], 
l = bbcodes.length, 
joinRight = '<span class="easy_edit_button easy_button_', 
joinLeft = '</span>', 
outerJoinRight = '<span class="button_wrap">'; 

while(l--){ 
    var thisRow = bbcodes[l], 
    ll = thisRow.length; 

    while(ll--){ 
     thisRow[ll] += '">' + thisRow[ll]; 
    } 

    bbcodes[l] = joinRight + thisRow.join(joinLeft+joinRight) + joinLeft; 
} 
bbcodes = outerJoinRight + bbcodes.join(joinLeft + outerJoinRight) + joinLeft; 

document.body.innerHTML = bbcodes;