jQuery：在Ajax内容上应用CSS [英] jQuery: Apply CSS on Ajax content

问题描述

我喜欢数据通过jQuery ajax调用。干净的代码，它看起来很滑。

I like it that data gets called through jQuery ajax. Clean coding and it looks slick.

我想知道下面的代码是否是正确的方法来做到这一点。它的工作原理（这是一回事），但我不知道如果应用CSS的方式是正确的方式：

I'm wondering if the code below is the correct way to do this. It works (that's one thing), but i'm not sure if applying the css that way is the correct way :s.

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

I know some questions here apply to the same, but those questions are more specific to one problem. I want to know what is the best practice.

提前感谢！

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

推荐答案

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

Any CSS will apply to the elements on the page, even if they were loaded through ajax. Just move it to your CSS file.

这篇关于jQuery：在Ajax内容上应用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！