jQuery: применить CSS к содержимому Ajax

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().