Json循环不运行答案

【问题标题】：Json loop doesn't runJson循环不运行
【发布时间】：2016-10-21 21:25:16
【问题描述】：

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

【问题讨论】：

您正在覆盖item，因此它始终指向第一个元素：item=json[0]; 删除该行。
我在小提琴上试过。但这不是错误:-(
还将$(json).each(function(item){ 更改为$(json).each(function(i, item){
@Viktor 你让我开心:-)，谢谢。但现在我尝试了 3 个 id，它在第二个之后停止。你能看看吗？ jsfiddle.net/5wyL5azj/6
这只是由于您的 CSS 样式。如果您使用开发者工具或类似工具检查呈现的 HTML，您可以看到所有三个 divs 及其内容都在那里。

标签： javascript jquery json loops foreach

【解决方案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/

【讨论】：

@Thalavier 嗯...我想我写错了代码。每个 id 有 2 张图片。我会设置每个循环，为每个 id 一个 div 设置图片。

【解决方案2】：

您无需手动设置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');
});

【讨论】：

【解决方案3】：

传入 jQuery 的 each 方法的参数是index，后跟item。在您的代码中，item 指的是 index 而不是 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 快，但在您当前的场景中这应该无关紧要

【讨论】：

嗯，你能帮我改一下代码吗，因为我不知道。 :-(