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

我正试图在最后创建这个HTML标记

<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>

只是很难让数组和对象循环工作我猜???

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次。这应该是一个简单的2D数组。

$('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;

嵌套数组/对象创建HTML？

3 个答案: