Question

I can’t get the jquery syntax to work so that I can append 1 (or more) child div to each parent div that is dynamically generated.

Below is the working code that generates 10 rows (divs) of letters

var alphabet = new Array('A','B','C','D','E','F','G','H','I','J');
$(function() {
    for(i=0; i<10; i++) {
         $('<div/>', {
    id: 'foo',
    'class': 'letters',
    text: alphabet[i],
    css: {  

        'padding-left': '5px',
        'background-color': 'fff',
        'overflow': 'hidden',
        'height': '22px',
        'width': '745px',
    },  
}).appendTo('div#container');
    }
});

How do I add a ‘number div’ (or 2 divs) inside of each ‘letter div’?

I suppose I can use jquery’s ‘each’ function to add divs inside ‘letter divs’, but I want to find out if it is possible insert a repeating code such as $('<div/>', {... inside the code above. I tried, but there were errors in the code and I don’t know enough to tell whether it was not logical or syntaxically incorrect. Please suggest the correct code.

TIA

Answer 1

Well to append another div inside each of those divs you could simply

$(function() {
    for(i=0; i<10; i++) {
         var otherDiv = $('<div/>');
           var  alphabetDiv =  $('<div/>', {
    id: 'foo',
    'class': 'letters',
    text: alphabet[i],
    css: {  

        'padding-left': '5px',
        'background-color': 'fff',
        'overflow': 'hidden',
        'height': '22px',
        'width': '745px',
    },  
   });
   otherDiv.appendTo(alphabetDiv);
  alphabetDiv.appendTo('div#container');
    }
});