使用for循环通过JSON循环循环

Question

我试图通过跟随JSON来添加图像-

json = [{
        "id": 6,
        "name": "rac2 ",
        "shop_id": 4,
        "categories_id": 5,
        "category": "category-5",
        "min_price": 555,
        "max_price": 55656,
        "image": "http://www.shopforshops.com/www/61/files/clothing-racks1.jpg",
    },
    {
        "id": 64,
        "name": "rac32 ",
        "shop_id": 4,
        "categories_id": 5,
        "category": "category-5",
        "min_price": 555,
        "max_price": 55656,
        "image": "http://ohjoy.blogs.com/.a/6a00d8341c6a0853ef019affb2bbfe970c-800wi",
    },
    {
        "id": 643,
        "name": "rac32 ",
        "shop_id": 44,
        "categories_id": 5,
        "category": "category-5",
        "min_price": 555,
        "max_price": 55656,
        "image": "http://cache2.asset-cache.net/gc/129305805-racks-of-clothes-in-a-menswear-store-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=mcPYJ5XyANr2jzh2gHmNDG%2FS5MzSDogxQ%2BKrWHyAnTHGKr%2FOnkBx3JkVNAMcV9GZ",
    },
]

我把它循环成这样-

 $('.rackLayer').css({"background-image": "url('" + json[0].image + "')"});
            for (z = 1; z < json.length; z++)
            {
                    $('.rackLayer').after("<div class='inside-rack'> </div>");
                    $('.inside-rack').css({"background-image": "url('" + json[z].image + "')"});
            }

而html是-

<div class="container-fluid">
            <div class="row">
                <div id="scroll-section">
                    <div class="rackLayer">

                    </div>
                </div>
            </div>
        </div>

我想要的是，首先添加带有O索引的图像，然后按照索引1和2的顺序添加剩余的图像。

有人能帮忙吗？

Answer 1

更新这一条：

for (z = 1; z < json.length; z++)
{
   var div = $("<div >", { //<---creates div element
      class  :'inside-rack', 
      'style':'background-image:url("'+ json[z].image +'")' // <--style the bgimg
   });
   $('.rackLayer').after(div); //<---now push in the DOM.
}

问题似乎在我看来，选择器，$('.inside-rack')，这将改变所有的div。循环结束时，每个对象都从json获取最后一个对象的图像属性。

因此，解决方案是在那里创建一个新的元素样式，然后将其推入DOM中。

Answer 2

问题是$('.inside-rack').css({"background-image": "url('" + json[z].image + "')"});将背景图像应用于所有先前添加的元素，而只需要针对新创建的元素。

​

json = [{
  "id": 6,
  "name": "rac2 ",
  "shop_id": 4,
  "categories_id": 5,
  "category": "category-5",
  "min_price": 555,
  "max_price": 55656,
  "image": "http://www.shopforshops.com/www/61/files/clothing-racks1.jpg",
}, {
  "id": 64,
  "name": "rac32 ",
  "shop_id": 4,
  "categories_id": 5,
  "category": "category-5",
  "min_price": 555,
  "max_price": 55656,
  "image": "http://ohjoy.blogs.com/.a/6a00d8341c6a0853ef019affb2bbfe970c-800wi",
}, {
  "id": 643,
  "name": "rac32 ",
  "shop_id": 44,
  "categories_id": 5,
  "category": "category-5",
  "min_price": 555,
  "max_price": 55656,
  "image": "http://cache2.asset-cache.net/gc/129305805-racks-of-clothes-in-a-menswear-store-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=mcPYJ5XyANr2jzh2gHmNDG%2FS5MzSDogxQ%2BKrWHyAnTHGKr%2FOnkBx3JkVNAMcV9GZ",
}]


var $layer = $('.rackLayer').css({
  "background-image": "url('" + json[0].image + "')"
});

for (z = 1; z < json.length; z++) {
  $("<div class='inside-rack'></div>").css({
    "background-image": "url('" + json[z].image + "')"
  }).insertAfter($layer);
  $('.rackLayer').after();
}

.rackLayer,
.inside-rack {
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rackLayer"></div>

​