代码之家 › 专栏 › 技术社区 › vol7ron

jQuery:修改附加对象的CSS

jquery-ui jquery javascript

vol7ron · 技术社区 · 14 年前

$('#foo').css({color:'black'}).append('<div>bar</div>').css({color:'red'});

鉴于上述情况 css() 方法应用于 foo ,但你怎么能把它应用到包装“bar”的div上呢?

在同一个执行行中,我能想到的唯一方法是在 append(function(){ ... }) 然后在那里应用样式。

注: 我尽量避免内联样式(如 .append('<div style="color:red;">bar</div>') ).

更新: 我实际上也在将css应用到foo中;这个例子已经更新以反映这一点

7 回复 | 直到 14 年前

Nick Craver 14 年前

你可以把链子转过来 .css() 通过使用 .appendTo() 相反,像这样:

$('<div>bar</div>').appendTo('#foo').css({color:'red'});
//or:
$('<div>bar</div>').css({color:'red'}).appendTo('#foo');
//or:
$('<div />', { text:'bar', css: {color:'red'} }).appendTo('#foo');

Richard Marskell - Drackir Sunil Tandon 14 年前

试试这个:

$('<div>bar</div>').css({color:'red'}).appendTo('#foo');

MatTheCat 14 年前

$('#foo').append($('<div>bar</div>').css({color:'red'}));

Ivan 14 年前

或者$之类的

$('#foo').append($('<div />').text('bar').css({color:'red'}));

James Kovacs 14 年前

最简单的方法是使用append to()而不是append():

$('<div>bar</div>').css({color:'red'}).appendTo('#foo');

你可以在这里找到一个工作样本: http://jsfiddle.net/YdzGZ/

Josiah Ruddell 14 年前

怎么办:

$('#foo').append('<div>bar</div>').end().css({color:'red'});

istruble kalyan 14 年前

不如从动态方法后退一步,在css中创建一两条规则?

#foo { color: black; }
#foo div,
#foo .orViaSomeClassName { color: red; }

不需要像这样胡闹注入内联样式。

最后是另一种获得附加div的方法:

$('#foo')
    .css('color', 'black') // css on #foo
    .append('<div>bar</div>') // appended to #foo
    .find('div')
        .css('color', 'red'); // css on divs inside #foo

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前