Question

我正在为我的博客开发我的JQuery移动应用程序，并尝试在博客输出中添加一些css。

我有以下自定义js代码：

function listPosts(data) {
var output='<ul data-role="listview" data-filter="true">';
$.each(data.posts,function(key,val) {

    output += '<li>';
    output += '<a href="#bpost" onclick="displayPost(' + val.id + ')">';
    output += '<h3>' + val.title + '</h3>';
    output += '<span class="ui-li-count">' + val.comment_count + '</span>';

    output += '<p class="postedon" >Posted on ' + val.date.substring(0,10) +

class =“postedon”作为css样式将日期输出颜色更改为红色，但我遇到的问题是日期和“已发布”的文本显示为红色。

如何设置此样式以避免文本“已发布”颜色已更改为红色。

Answer 1

尝试使用span包装日期并向其添加类

 output += '<p>Posted on <span class="postedon">' + val.date.substring(0,10) + '</span>'+

Answer 2

您可以在日期周围放置一个span元素，然后将其定位到您的css中，如下所示：

p.postedon span {
    color: red;
}

Answer 3

也许这个？

CSS：

.postedon {
color:black;
}
.postedon span {
color: red;
}

代码

function listPosts(data) {
var output='<ul data-role="listview" data-filter="true">';
$.each(data.posts,function(key,val) {

    output += '<li>';
    output += '<a href="#bpost" onclick="displayPost(' + val.id + ')">';
    output += '<h3>' + val.title + '</h3>';
    output += '<span class="ui-li-count">' + val.comment_count + '</span>';

    output += '<p class="postedon" >Posted on <span>' + val.date.substring(0,10) + '</span>' +

http://jsfiddle.net/Yk7St/

添加CSS样式以输出jquery

3 个答案: