如何动态设置元素的所有子元素的样式？

我有一个已知的容器div，我将动态地填充子项。我想在孩子上指定一些.css属性来定位它们，但是我想避免在我创建的每个子元素上手动设置.css样式。我将能够为每组元素动态生成一个唯一的类，所以如果有一种方法可以应用影响匹配某个选择器的元素的所有子元素的CSS，我希望这样做。如何动态设置元素的所有子元素的样式？

我的应用程序类似this fiddle.

var numChildren = 0; 

$('.myButton').on('click', function(){ 

    $('<div class=childDiv' + numChildren + '>Div!</div>') 
     .appendTo('.myDiv') 
     .css({ 
      display: 'inline', 
      'padding-left': (10 + 10*numChildren) + 'px' 
      //I'd like to put something like this padding left class on the parent div. 
      //I know the class of all children that should have this style, 
      //but I don't know until I create the child. 
     }); 

    $('<div class=childDiv' + numChildren + '>Div!</div>') 
     .appendTo('.secondDiv') 
     .css({ 
      display: 'inline', 
      'padding-left': (10 + 10*numChildren) + 'px' 
     }); 

    numChildren++; 
});

在这个例子中，我动态生成的几个孩子像childDiv0类。我可以使用某种padding-left手动设置它们的全部样式，但在我的实际应用程序中，我生成了很多元素，而快速渲染它们所需的回流正在减慢我的应用程序。有没有办法将CSS应用于父代而不是孩子？我可以做类似这样的事情吗？

$('.parentElement').css(
    ':childWithSelector(.childDiv'+ numChildren + ').width', //Not a real thing :(
    10 + 10*numChildren + 'px' 
);

jQuery是可选的。

来源

2014-04-11 ckersch

另外：不知道这个问题有多清楚。让我知道是否有任何混淆，我会尽力清除它。 – ckersch

#knowndiv div {}将已经选择所有的孩子。你是否只想瞄准其中的一些？ –

我试图选择所有具有某个类的孩子，并将一些.css应用于他们，而不是将.css内联应用于每个子元素。 – ckersch

在纯CSS，你可以选择直接儿童或所有后代通过使用您的（独特）类，或一个ID

/* color only immediate children red */ 
.myclass > * { 
    color: red; 
} 
/* color all descendants red */ 
.myclass * { 
    color: red; 
} 
/* similar, with an ID */ 
#myelement > * { 
    color: red; 
}

简单的选择器为j与这些匹配的查询是

var children = $('> *', $('.myclass')); 
var descendants = $('*', $('.myclass'));

并且您可以使用.each()这些。

来源

2014-04-11 19:49:12

尽管如此，但这并没有解决“动态值”问题。 – user2864740

@ user2864740 - 但您可以像动态添加DOM元素一样容易地动态添加样式规则。如果你选择一个类而不是动态生成独特的类，那么你可以静态定义你的CSS。（以及为什么生成唯一的*类* ??这是一个ID是什么！） –

这将工作，如果我一次向所有的孩子应用.css，但我一次添加一个孩子。我的偏好不是将.css添加到子项本身（类似于每个项目），因为当我向子项添加内联CSS时，会触发重排。我会知道类是什么，但直到我加载一些数据，所以我不能直接将样式设置到样式表中。 – ckersch

如果每个孩子都需要有一个独特的设置宽度，然后

$('.parentElement').find('.childDiv').each(function() { 
    $(this).css('width', 10 + 10*numChildren + 'px'); 
});

但是，如果每个孩子都有相同的宽度进行设置，则

$('.parentElement').find('.childDiv').css('width', 10 + 10*numChildren + 'px');

来源

2014-04-11 19:48:14 shrmn

如何动态设置元素的所有子元素的样式？

回答

相关问题