如何使用jQuery基于项目数动态创建div

时间:2016-04-30 12:38:38

标签: jquery

我有一个jQuery方法,我得到一个数据集合如果集合有2个项目,我想创建2个div,如果集合有5个项目,我想创建5个div。

我的摘录

 function fetchOrderData() {
    $(".loading").show();
    $.ajax({
        method: "GET",
        url: baseUrl + "GetData",
        data: { JobNo: $("#JobNo").val() }
    }).success(function (data) {
        if (data) {
            $("#datano").html("<strong>data Id: </strong>:" + data.No);
            $("#itmqty").html("<strong>Qty: </strong>:" + data.Quantity);
            $("#price").html("<strong>Price: </strong>:" + data.Price);
                    });
                });
            } else {
                $('.alert-danger').show();
            }
        }

我的设计代码是:

                                    <div class="box4">
                                    <div class="col-md-4" id="datano">
                                        <strong>ItemNo: </strong></div>
                                    <div class="col-md-2" id="itmqty">
                                        <strong>Qty: </strong></div>
                                    <div class="col-md-3" id="price">
                                        <strong>Price: </strong></div>
                                    <!-- <div class="col-md-2" id="item_status">
                                        Status</div> -->
                                    <div class="col-md-1">
                                        <a href="" data-toggle="modal" data-target="#itemformedit"><span class="glyphicon glyphicon-edit">
                                        </span></a>| <a href=""><span class="glyphicon glyphicon-eye-open"></span></a>
                                    </div>
                                </div>

1 个答案:

答案 0 :(得分:0)

使用json编码将其传递给数组(例如:data)并使用&#39; &#39;循环成功功能。

for(i = 0 ; i < data.length; i++){
    $("#datano").html("<strong>data Id: </strong>:" + data[0]);
    $("#itmqty").html("<strong>Qty: </strong>:" + data[1]);
    $("#price").html("<strong>Price: </strong>:" + data[2]);
}