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を使用しています。これは簡単にシムwhileを設定したり、 orforループに変更したりできます。

更新: shim を使用したくない場合は、上記がwhileループに変換されています。Node.textContentの代わりにdocument.createTextNodeを使用します。

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 に答える