0

2 つの配列がありますvar nodes = new Array("alpha","beta","omega"); var childnodes = new Array("one","two","three");。私が望むのは、ノード配列から 3 つの div 要素を作成し、さらに 3 つの div 要素を各ノードの配列 div タグに追加して、次のようにすることです。

<div class="alpha">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
<div class="beta">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
<div class="omega">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

jqueryでこれを達成するにはどうすればよいですか? 私の現在のコードは親ノードを追加しますが、子ノードを親に追加しません。次のコードを機能させるにはどうすればよいですか?

これが私のコードです

var nodes = new Array("alpha","beta","omega");
var childnodes = new Array("one","two","three");

for (var i = 0; i < nodes.length; i++) {
    var parentNodes = "<div class='" + nodes[i] + "'></div>";
    console.log(parentNodes);
    for (var j = 0; j < childnodes.length; j++) {
        var childNodes  = "<div class='" + childnodes[j] + "'></div>";
        var p = $(parentNodes).attr('class');
        console.log($('.' + p).append(childNodes));
        $('.' + p).append(childNodes);
        console.log(childNodes);
    }
    $('body').append(parentNodes);
}

ここにjsfiddleコードがあります

4

2 に答える 2

4 
var nodes = ["alpha","beta","omega"];
var childnodes = ["one","two","three"];

$.each(nodes, function(i, node) {
    var div = $('<div>').addClass(node);
    $.each(childnodes, function(i, node) {
       $('<div>').addClass(node).appendTo(div);
    });
    div.appendTo('body');
})​

これがデモです。

于 2012-08-09T07:28:24.760 に答える
1

遅いが別の例：

var nodes = new Array("alpha","beta","omega");
var childnodes = new Array("one","two","three");

    for (var i in nodes) {
        var $nodes = $('<div>'+nodes[i]+'</div>');
        for(var k in childnodes){
            var $child = $('<div>'+childnodes[k]+'</div>');
            $child.appendTo($nodes);
        }
        $nodes.appendTo('#container');           
    }
于 2012-08-09T07:33:22.030 に答える