Question

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

Answer 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()。

Answer 2

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

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

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

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

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

2 个答案: