Json循环不运行

时间:2016-06-20 14:55:38

标签: javascript jquery json loops foreach

我有一个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/

3 个答案:

答案 0 :(得分:5)

 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/

答案 1 :(得分:0)

您不需要手动设置item变量,它将被设置为数组中的下一个项目:

$(json).each(function(item) {
    console.log(item.id);
    $('<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');
});

答案 2 :(得分:0)

传递到jQuery的每个方法的参数都是index,然后是item。在您的代码中, item 指的是索引,而不是 本身。将您的每个代码更改为类似的内容:

var test = function() {
  var url = {"cats": [{"id": 1,"name":"one"},{"id":2,"name":"two"}]};
  var json = url["cats"];
  //json.forEach(function(item){ console.log(item); });  // Native JS for each loop
  $(json).each(function(){ console.log(this); }); // jQuery for each loop
};

当然,纯JS for each通常比jQuery更快,但在当前场景中这不是很重要