我有一个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);
}
答案 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]
将始终指向第一个元素,并且循环不会起作用。
答案 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更快,但在当前场景中这不是很重要