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

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

4

3 回答 3

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，它可以很容易地被填充或者您可以更改为whileorfor循环。

更新：如果您不喜欢 shim，那么这里是上面的但转换为while循环，这是跨浏览器友好的，无需 shim。并使用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 上

于 2013-06-13T01:08:12.430 回答
0

数组连接方法是解决此类问题的好方法。如果不是因为需要调整每个类，我什至不需要内部循环。当您不需要添加唯一属性时，它对于创建表格和列表特别强大和简洁。

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;
于 2013-06-13T02:21:15.120 回答
0 
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 元素，您可能需要查看其中之一。

于 2013-06-13T00:56:14.873 回答