jQuery：在Ajax内容上应用CSS

我喜欢通过jQueryAjax调用数据。干净的编码和它看起来光滑

我想知道下面的代码是否是正确的方法。它是有效的（这是一件事），但我不确定这样应用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"
    })
});

$.ajax（'db/getLatestAlbums.php'）.done（函数（数据）{
//填充相册
var项目=[]；
obj=$.parseJSON（data.trim（））；
$。每个（对象、函数（id、值）{
items.push（“
“+value.category\u name+”
”）；
});
$（“ul#albums_list”）.html（items.join（“”））；
$（“ul#相册列表li”）.css({
“背景”：“无重复滚动0 0#252525”，
“边界半径”：“3px 3px 3px 3px”，
“浮动”：“左”，
“高度”：“300px”，
“余量”：“10px 11px 10px 10px”，
“填充”：“0”，
“宽度”：“225px”，
“显示”：“内联表”
});
$（“ul#相册列表li a”）.css({
“溢出”：“隐藏”，
“显示”：“块”，
“位置”：“相对”
});
$（“ul#albums#u list li a img”）.css({
“显示”：“块”，
“位置”：“相对”，
“边界半径”：“3px 3px 3px 3px”，
“高度”：“221px”，
“宽度”：“221px”，
“边距”：“2px”，
“边框”：“中无”
});
$（“ul#相册列表li p”）.css({
“保证金上限”：“20px”，
“填充”：“0 10px”，
“文本对齐”：“居中”
})
});

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

只需将其移动到CSS文件，具有特定类名的ajax内容将与定义的属性一起应用。

取决于您试图实现的目标。如果您只是简单地尝试将样式应用于新加载的内容，那么就像其他注释所说的那样，只需将其放在css规则中，它将在加载时自动应用

---

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

谢谢-这是可耻的。我发誓它以前没用过。但这是正确的：）。好的，那么仍然将css放在style.css文件中，并在需要时调用它？谢谢