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

【问题标题】：How can I dynamically set a style for all children of an element?如何为元素的所有子元素动态设置样式？
【发布时间】：2014-05-26 02:57:08
【问题描述】：

我有一个已知的容器 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 是可选的。

【问题讨论】：

另外：不确定这个问题有多清楚。让我知道是否有任何令人困惑的地方，我会尽力解决。
#knowndiv div { } 将已经选择所有子项。您是想只针对其中的一部分吗？
我正在尝试选择具有某个类的所有子级并将一些 .css 应用于他们，而不将 .css 内联应用于每个子元素。

标签： javascript html

【解决方案1】：

在纯 CSS 中，您可以使用（唯一）类或 ID 选择直接子代或所有后代

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

与这些匹配的 jQuery 简单选择器是

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

你可以在这些上使用.each()。

【讨论】：

虽然是这样，但这并不涉及“动态值”。
@user2864740 - 但您可以像动态添加 DOM 元素一样轻松地动态添加样式规则。如果你选择一个类而不是动态生成唯一的类，那么你可以静态定义你的 CSS。（为什么要生成唯一的类？？这就是ID！）
如果我一次将 .css 应用于所有孩子，这将起作用，但我一次添加一个孩子。我的偏好是不要将 .css 添加到孩子本身（每个都类似），因为当我向孩子添加内联 css 时会触发重排。我会知道类是什么，但直到我加载了一些数据，所以我只能将样式直接放入样式表中。
我正在生成独特的类，因为我将有一堆具有相同类的元素，但在我从服务器获取数据之前我不知道这些类将是什么。
@ckersch - 我使用了 2 种不同的技术来动态更改样式... 1) 通过 javascript 操作样式对象 - 我在某处有一个答案，我目前无法找到演示这样做。 2）“mystyles.css”不是我服务器上的真正css文件，它是由Java servlet（任何服务器语言都可以）根据用户偏好按需生成的。 “mystyle.css”在我的网络应用程序中配置为运行将 css 内容流式传输到浏览器的服务器代码。通过动态拖动，似乎#1 更适合您。

【解决方案2】：

如果每个孩子都需要设置唯一的宽度，那么

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

但是如果每个孩子都设置相同的宽度，那么

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

【讨论】：