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应用于foo;该示例已更新以反映此

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');

Answer 2

试试这个：

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

Answer 3

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

Answer 4

或类似

的东西

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

Answer 5

最简单的方法是使用appendTo（）而不是append（）：

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

您可以在此处找到工作示例：http://jsfiddle.net/YdzGZ/

Answer 6

怎么样：

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

Answer 7

你如何从动态方法退后一步，在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

jQuery：修改附加对象的CSS

7 个答案: