javascript - jQuery:修改附加对象的 CSS

Question

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

鉴于上述情况，css()方法应用于foo ，但是如何才能将其应用于包裹“bar”的 div 呢？

我能想到的在同一执行行中执行此操作的唯一方法是在 append(function(){ ... }) 内部创建一个 jQuery div 对象。并在那里应用样式。

<小时/>

注意:我试图避免内联样式(例如 .append('<div style="color:red;">bar</div>') )。

<小时/>

更新:我实际上也在将 css 应用到 f​​oo ；该示例已更新以反射(reflect)这一点

Answer 1

你可以翻转链条，这样.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');