javascript - Json 循环不运行

Question

我有一个 JSON 数组和一些 JavaScript，但循环没有执行。

我找不到错误。

HTML:

<div class="rosa" id="Mittelt">
  // place to append
</div>

JavaScript:

$(function() {
    var url = {"cats": [
        {"id":"1",
            "pictures":"http://www.w3schools.com/css/img_fjords.jpg",
            "picsmall":"http://www.w3schools.com/css/img_fjords.jpg"},
        {"id":"2",
            "pictures":"http://www.w3schools.com/css/img_lights.jpg",
            "picsmall":"http://www.w3schools.com/css/img_lights.jpg"}
        ]
    };
    var json=url["cats"];
    $(json).each(function(item) {
        console.log(json[0].id);
        item=json[0];
    $('<div class="lulu">' + 
        '<img src="http://www.w3schools.com/css/img_fjords.jpg" data-src="'+item.pictures+'.jpg"/>' +
        '<img class="lora" src="'+item.picsmall+'"/>'+'</div>')
        .appendTo('#Mittelt');
    })

CSS:

.lulu {
    position:absolute;
    height:100%;
    -webkit-transform: translateZ(0px);
    -ms-transform: translateZ(0px);
    -o-transform: translateZ(0px);
    transform: translateZ(0px);
}

.lora {
    position:absolute;
    height:50%;
    -webkit-transform: translateZ(0px);
    -ms-transform: translateZ(0px);
    -o-transform: translateZ(0px);
    transform: translateZ(0px);
}

这是一个链接:https://jsfiddle.net/5wyL5azj/2/

Answer 1

 for(var i=0; i<json.length; i++){
    (function(i){
       $('<div class="lulu">' + 
          '<img src="http://www.w3schools.com/css/img_fjords.jpg" data-src="'+json[i].pictures+'.jpg"/>' +
          '<img class="lora" src="'+json[i].picsmall+'"/>'+'</div>')
          .appendTo('#Mittelt'); 
    })(i)
 }

item=json[0] 将始终指向第一个元素，循环将不起作用。

https://jsfiddle.net/5wyL5azj/4/