Question

I have the following script:

function drawDimensions(divid) {
    $.getJSON('dimensions.json', function(data) {
        $.each(data, function(index) {
            var ppp = $('#' + divid).append("<div class='dTitle'><img src='images/cleardot.gif' />" + index + "</div><br>");
          $.each(this, function(k, v) {
              $('<div>').append(v).appendTo(ppp);
          });
        });
    });
}
drawDimensions('dim');

I’m trying to nest the divs so the values from the first loop will be the parents of the divs on the second loop.

What am I doing wrong? the second loop divs are not nested within the first one but simply appended after the first ones..

Answer 1

Your ppp is actually a reference to $('#' + divid), not to the newly created (outer) div.

Try this:

var ppp = $("<div class='dTitle'><img src='images/cleardot.gif' />" + index + "</div><br>");
ppp.appendTo('#' + divid);