追加到不工作

时间:2015-07-14 16:51:32

标签: jquery json

晚安,

我有以下代码

$( document ).ready(function() {
    $.get( "php/get_ratings.php")

        .done(function(data) {
            $("#newrow").html('');
            $("#list_loc").html('');
            var results = jQuery.parseJSON(data);

            $.each(results, function(i, value) {
                var newrow =   $("<div />", {
                    id : "new"+results[i].id
                });
                var newLoc = $("<div />", {
                    id: "loc"+results[i].id,
                    text: results[i].city
                });
                $("#newrow").append(newrow);
                $("#list_loc").append(newLoc);

                $('#list_loc').appendTo('#newrow');
            })
        });
});

HTML

<div class="container">
   <div class="row list">
     <div id="newrow">
       <div class="row">
          <div class="col-md-12">
             <div id="list_loc">
             </div>
          </div>
       </div>
     </div>
    </div>
 </div>

我想要实现的是创建两个动态div然后将一个div插入另一个但是由于某种原因我只得到我的“newrow”div。有人可以解释一下我做错了吗?

提前致谢,

d

P.S我期待最终的html看起来像

<div class="list">
 <div id="row1">
   <div id="loc1">
   </div>
 <div id="row2">
  <div id="loc2">
  </div>
 </div>
</div>

1 个答案:

答案 0 :(得分:1)

试试这个:

$(document).ready(function () {
    $.get("php/get_ratings.php")
            .done(function (data) {
                $("#newrow").html('');
           //   $("#list_loc").html(''); No point, you already cleared it in the line above
                var results = jQuery.parseJSON(data);

                $.each(results, function (i, value) {
                    var newrow = $("<div />", {
                        id: "new" + results[i].id
                    }).append( //new loc is appeneded directly to new row
                            $("<div />",
                                    {
                                        id: "loc" + results[i].id,
                                        text: results[i].city
                                    })
                            );

                    $("#newrow").append(newrow);
                });
            });
});