Question

我是Jquery和Json的新手。在ajax成功发生后，我动态创建了这个html。

<itemsdiv>
    <item> 
      <row>
         <div class=col-xs-12></div>
       </row>
       <row><div class=col-xs-12></div>
       </row>
       <row><div class=col-xs-12></div>
       </row>
    </item>
    <item> 
       <row>
         <div class=col-xs-12></div>
       </row>
       <row><div class=col-xs-12></div>
       </row>
       <row><div class=col-xs-12></div>
       </row>
    </item>
</itemsdiv>

JQuery的：

$.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "main.aspx/GetRooms",
                data: "{'arrival':'" + arrival + "','departure':'" + departure + "','nob':'" + nob + "'}",
                dataType: "json",
                success: function (response) {                    

                var e = $('<div id="itemsdiv"></div>');

                    $('#step-1 .col-md-12').append(e);

                    var result = jQuery.parseJSON(response.d);
                    var length = 0;              
                    for (var key in result) {
                      if (result.hasOwnProperty(key)) {
                            length++;
                            $item= $('<div class="item" />').attr('id', 'room' + length);
                            $('#itemsdiv').append($item);

                            var id= result[key].ID;
                            var title= result[key].Title;
                            var price= result[key].Price;
                     }

                    }
                    for (var x = 0; x < 3; x = x + 1) {
                        $row = $('<div class="row" />');
                        $('.item').append($row);
                    }

                    $colx = $("<div class='col-xs-12'></div>");
                    $('.item'.row').append($colx);

                },
                error: function (result) {
                    alert("err");
                }
            });

我无法弄清楚如何将从db返回的json值放到div中的相应位置。喜欢这个订单：

 <itemsdiv>
        <item> 
          <row>
             <div class=col-xs-12> title bla </div>
           </row>
           <row><div class=col-xs-12> Price 10$ </div>
           </row>
           <row><div class=col-xs-12></div>
           </row>
        </item>
        <item> 
           <row>
             <div class=col-xs-12> title bla bla</div>
           </row>
           <row><div class=col-xs-12> Price 100$ </div>
           </row>
           <row><div class=col-xs-12></div>
           </row>
        </item>
    </itemsdiv>

Answer 1

这有点难以理解，但我会尝试在这个答案中与你合作并直截了当。我现在能想到的最好的，你想要的东西如下：

var e = $('<div />', { id: "itemsdiv" }).appendTo('#step-1 .col-md-12'),
    r = jQuery.parseJSON(response.d),
    i = 0;

$.each(r, function(k) {
    var id = this.ID,
        title = this.Title,
        price = this.Price,
        divItem = $('<div />', { "class": "item", id: "room" + i++ }).appendTo(e);

    divItem.append(
        $('<div />', { "class": "row" }).append($('<div />', { "class": "col-xs-12", text: title })),
        $('<div />', { "class": "row" }).append($('<div />', { "class": "col-xs-12", text: price })),
        $('<div />', { "class": "row" }).append($('<div />', { "class": "col-xs-12", text: id }))
    );
});

看起来像是：

＆＃13;

var response = { d: JSON.stringify({ item1: { ID: 'id1', Title: 'title bla', Price: '$100.99' }, item2: { ID: 'id2', Title: 'title 2 bla', Price: '$9.99' }, item3: { ID: 'id3', Title: 'title bla 3', Price: '$99.99' } }) };

var e = $('<div />', { id: "itemsdiv" }).appendTo('#step-1 .col-md-12'),
	r = jQuery.parseJSON(response.d),
	i = 0;

$.each(r, function(k) {
	var id = this.ID,
		title = this.Title,
		price = this.Price,
		divItem = $('<div />', { "class": "item", id: "room" + i++, text: 'Room # ' + i }).appendTo(e);
	
	divItem.append(
		$('<div />', { "class": "row" }).append($('<div />', { "class": "col-xs-12", text: title })),
		$('<div />', { "class": "row" }).append($('<div />', { "class": "col-xs-12", text: price })),
		$('<div />', { "class": "row" }).append($('<div />', { "class": "col-xs-12", text: id }))
	);
});

＆＃13;

#step-1 { color: white; }
.item { background: blue; margin: .5em 1em; padding-left: 1em; }
.row { background: red; padding: .5em 1em; }
.row .col-xs-12 { border: 1px solid; }
.col-xs-12 { padding-left: 1em; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="step-1"><div class="col-md-12"></div></div>

＆＃13;

如何在动态创建的行中的JQuery中追加json对象

1 个答案: