I have been trying to populate a div with data using JSON, but I am facing an issue where my div, which is set with JavaScript for each JSON element, does not seem to be working correctly. The classes "lulu" and "lora" are not being recognized. Apologies for my poor English, I hope my explanation was clear.
Could someone please assist me with this problem? Thank you.
Below is the code I am using:
Javascript:
<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">
// Placeholder for content
</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 data is being retrieved successfully, but it seems like the classes are not being applied as intended.
Thank you for any help in advance.