嵌套数组/对象创建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;