Using jQuery ajax to retrieve data is a great choice. It results in clean and sleek coding.
I have successfully implemented the code below, but I am uncertain if applying CSS in that manner is the correct approach. Any thoughts?
While there are similar questions on this topic, they tend to focus on specific issues. I am more interested in learning about best practices.
Thank you in advance!
$.ajax('db/getLatestAlbums.php').done(function(data) {
//populate albums ul
var items = [];
obj = $.parseJSON(data.trim());
$.each(obj, function(id, value) {
items.push('<li data-category="' + value.category_name + '"><a href="#"><img alt="' + value.album_name + '" src="' + value.album_cover + '"></a><p><a href="#">' + value.album_name + '</a><span>' + value.category_name + '</span></li>');
});
$("ul#albums_list").html(items.join(''));
$("ul#albums_list li").css({
"background": "none repeat scroll 0 0 #252525",
"border-radius": "3px 3px 3px 3px",
"float": "left",
"height": "300px",
"margin": "10px 11px 10px 10px",
"padding": "0",
"width": "225px",
"display": "inline-table"
});
$("ul#albums_list li a").css({
"overflow": "hidden",
"display": "block",
"position": "relative"
});
$("ul#albums_list li a img").css({
"display": "block",
"position": "relative",
"border-radius": "3px 3px 3px 3px",
"height": "221px",
"width": "221px",
"margin": "2px",
"border": "medium none"
});
$("ul#albums_list li p").css({
"margin-top": "20px",
"padding": "0 10px",
"text-align": "center"
})
});