Question

I have two arrays var nodes = new Array("alpha","beta","omega");
var childnodes = new Array("one","two","three");. What I want is to create three div elements from nodes array and then add three more div elements to each of the nodes’ array div tags so it will look like this.

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

How can I achieve this in jquery? My current code does add parent nodes but it does not add child nodes to the parent. How can I make the following code work?

Here is my code

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);
}

Here is jsfiddle code

Answer 1

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');
})​

Here is the demo.