user3690260 user3690260 - 5 months ago 8
Javascript Question

my css doesnt run in a json generated div

I am trying to fill a div with data using json.
But my div, set with javascript for each json element, doesn't run.
The classes lulu and lora don't run.
Sorry my bad English, I hope it was clear.

Can someone help me?
Thanks.

Here my code:

JS:

<script type="text/javascript">
$(function() {
var url="animals.json";

$.getJSON(url, function(json) {
$.each(json.cats, function(i,item) {
$('<div class="lulu">' +
'<img src="pics/style/blank.gif" data-src="img/'+item.pictures+'.jpg"/>' +
'<img class="lora" src="img/'+item.picsmall+'.jpg"/>'+'</div>')
.appendTo('#Mittelt');
});
});
});
</script>


HTML:

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


JSON:

{"cats":[
{"id":"1",
"pictures":"mia",
"picsmall":"miasmall"}
]
}


CSS

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


The json runs perfect, the result is as if there is no class.

Thank you in advance

Answer

JSON format of animals.json is little wrong.

Include below

var json=url["cats"];  
 $(json).each(function(item){  
    console.log(json[0].id);  
   item=json[0];

codepen-http://codepen.io/nagasai/pen/gMwXaK

Comments