如何在jQuery

Question

如何从GET调用我的html渲染对象并将data包装在bootstrap中col-*

尝试将其渲染为类似的东西

<div class="col-sm-4">
  <div class="thumbnail">
    <img src="./assets/imgs/products/coke-medium.png" alt="...">
     <div class="caption">
        <p>Coke 500ml</p>
        <p>
          <b>£1.99</b>
           <a href="#" class="btn btn-success pull-right" role="button" onclick="addItem()">Add</a>
        </p>
     </div>
  </div>
 </div>

这是我的GET功能，但是在foreach中它只给我最后一个项目名称。还有一种比我在下面尝试做的更好的方法吗？

 function getDrinks() {
    $.get('./assets/products.json')
        .then(function (data) {
            console.log(data.drinks);
            var drinks  = data.drinks;

            for (var i = 0; i < drinks.length; i++) {
                var element = drinks[i];
                $('#drink_list').html('<div class="col-sm-4">' + element.name + '</div>');
            }
        })
    }

JSON示例 -

{
 "drinks":[
    {
        "name": "Coke",
        "liter": "500ml",
        "image": "/products/coke-medium.png"
    },
}

Answer 1

函数html替换drink_list的内容。您需要使用append http://api.jquery.com/append/

for (var i = 0; i < drinks.length; i++) {
     var element = drinks[i];
     $('#drink_list').append('<div class="col-sm-4">' + element.name + '</div>');
}