Создать вложенный div из результата json

Question

Я получаю от вызова AJAX data, который имеет архитектуру, подобную

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

. Я хотел бы создать вложенные элементы div для каждого из элементов данных, таких как этот бла-бла-бла ... moreblah ... .....

У меня есть:

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

это не работает .. что я действительно хочу сделать, это добавить его во вновь созданный div "event" ..не список ... как я могу это сделать?

Спасибо !!!

Answer 1

Попробуйте что-то вроде этого: также убедитесь, что вы всегда создаете полные HTML-теги.Вы добавляете элементы dom, а не печатаете что-то в документе, таким образом: 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');
}

Чтобы поиграть с этим, см. Jsfiddle: http://jsfiddle.net/Fn3Fm/

Answer 2

1. Создать новый div.

2. Добавить его в список.

   for(var i in data){
       var event = $("<div class='event_item'></div>");
       event.append("<div class='date'>" + data[i].date + "</div>");
       // ... other stuff for the event div
   
       $("#thelist").append(event);
   }