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文件中即可。

Answer 2

只需将其移至css文件，具有特定类名的ajax内容将应用定义的属性。

Answer 3

取决于您想要实现的目标。如果您只是尝试将样式应用于新加载的内容，那么就像其他评论所说的那样，只需将其放入您的css规则中，它就会在加载时自动应用。

但是，如果你想为它添加逻辑，即不同的css取决于加载的内容，这将是一种方法，但最好在css中定义不同的类并简单地使用addClass （）和removeClass（）。

jQuery：在Ajax内容上应用CSS

3 个答案: