jQuery:在 Ajax 内容上应用 CSS

Question

我喜欢通过 jQuery ajax 调用数据。干净的编码，看起来很流畅。

我想知道下面的代码是否是执行此操作的正确方法。它有效(这是一回事)，但我不确定以这种方式应用 css 是否是正确的方式 :s。

我知道这里的一些问题同样适用，但这些问题更具体地针对一个问题。我想知道什么是最佳做法。

提前致谢!

$.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"
    })
});

Answer 1

任何 CSS 都将应用于页面上的元素，即使它们是通过 ajax 加载的。只需将其移动到您的 CSS 文件即可。