Question

I recieve from an AJAX call data which has an architecture like

data
[0] =>
      "date" => "blah"
      "location" => "blah"
      ...
[1] =>
      "date" => "moreblah"...................

I would like to create nested divs for each of the elements in data like this

blah
blah
…

moreblah
…
…..

I have:

for(var i in data){
    $("<div class='event_item'>").appendTo("#thelist");
    //make div class "date" with event.date inside
    $("<div class='date'>" + data[i].date + "</div>").appendTo("#thelist");
    //make div class "location" with event.location inside
    $("<div class='location'>" + data[i].location + "</div>").appendTo("#thelist");
    //make div class "descrip" with event.descrip inside
    $("<div class='descrip'>" + data[i].description + "</div>").appendTo("#thelist");
    //make div class "detail" with event.extra inside
    $("<div class='detail'>" + data[i].extra + "</div>").appendTo("#thelist");
    $("</div>").appendTo("#thelist");
}

this doesn’t work.. what i really want to do is append it to the newly created “event” div… not the list… how can i do that?

Thanks!!!

Answer 1

Try something like this: also, make sure use always create complete html tags. You’re adding dom elements, not printing something to the document, Thus: do’s: $('<div></div>);. Dont’s: $('</div>').

for(var i in data){

    var event = $("<div class='event_item'></div>");
    //make div class "date" with event.date inside
    $("<div class='date'>" + data[i].date + "</div>").appendTo(event);
    //make div class "location" with event.location inside
    $("<div class='location'>" + data[i].location + "</div>").appendTo(event);
    //make div class "descrip" with event.descrip inside
    $("<div class='descrip'>" + data[i].description + "</div>").appendTo(event);
    //make div class "detail" with event.extra inside
    $("<div class='detail'>" + data[i].extra + "</div>").appendTo(event);
    console.log(event);
    $(event).appendTo('#theList');
}

To play around with it, see the jsfiddle: http://jsfiddle.net/Fn3Fm/