2

I've got a known container div that I'll be dynamically populating with children. I'd like to specify some .css properties on the children to position them, but I'd like to avoid manually setting the .css styles on each child element that I create. I'll be able to dynamically generate a unique class for each group of elements, so if there is a way to apply css that affects all children of an element that match a certain selector, I'd like to do that.

My application does something like 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++;
});

In this example, I'm dynamically generating several children with a class like childDiv0. I can manually style them all with a certain padding-left, but in my actual application, I'm generating lots of elements and the reflow required to quickly render them is slowing down my application. Is there a way to apply the css to the parent instead of to the child? Can I do something similar to this:

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

jQuery is optional.

ckersch
  • 7,507
  • 2
  • 37
  • 44

2 Answers2

4

In plain CSS you can select either direct children or all descendants by using your (unique) class, or an ID

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

Easy selectors for jQuery that match these are

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

and you can use .each() on these.

Stephen P
  • 14,422
  • 2
  • 43
  • 67
  • 1
    While true, this doesn't address the "dynamic values". – user2864740 Apr 11 '14 at 19:50
  • @user2864740 - but you can dynamically add style rules just as easily as you can dynamically add DOM elements. And if you pick a class rather than dynamically generating unique classes, then you can statically define your CSS. (and why generate unique *classes* ?? That is what an ID is!) – Stephen P Apr 11 '14 at 19:52
  • This would work if I was applying the .css to all of the children at once, but I'm adding the children one at a time. My preference would be not to add the .css to the children themselves (with something like each) since that will trigger reflow when I add inline css to the child. I will know what the classes are, but not until I load some data, so I can't but the styling directly into the style sheet. – ckersch Apr 11 '14 at 19:53
  • I'm generating unique classes because I'm going to have a bunch of elements with the same class, but I don't know what those classes will be until I get my data from the server. – ckersch Apr 11 '14 at 19:53
  • @ckersch If you have at least a common prefix you can write CSS or jQuery selectors such as `div[class^=prefix]` or `div[class|=prefix]` -- the latter selects "prefix" or "prefix-something". See this MDN article on [Attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) – Stephen P Apr 11 '14 at 19:57
  • Also, if the server is telling you the class, you could use more than one class on the newly added div `
    ` styling with `div.addedDiv` without caring about the generated class, or combine them `
    ` then use `div[class|=added]` as a selector. And you can always further qualify it by the parent `.myDiv > .addedDiv { }`
     – Stephen P Apr 11 '14 at 20:00
  • I also need to set the styles dynamically, based on user input. For example, if the user drags an element with the class `childDiv4`, I need to modify the css for all children with that class. – ckersch Apr 11 '14 at 20:02
  • 1
    @ckersch - I have used 2 different techniques to dynamically alter styles... 1) manipulate the style objects via javascript - I have an answer somewhere on SO that I can't find at the moment that demonstrates doing this. 2) "mystyles.css" isn't really a css file on my server, it is generated per-user on demand by a Java servlet (any server lang would work) based on user prefs. "mystyle.css" is configured in my web-app to run server code that streams css content out to the browser. With dynamic dragging it seems #1 would be more for you. – Stephen P Apr 11 '14 at 20:17
  • Ah, I think that was what I was looking for. Any idea how cross browser it is? – ckersch Apr 11 '14 at 20:32
0

If every child needs to have a unique width set, then

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

But if every child has the same width to be set then

$('.parentElement').find('.childDiv').css('width', 10 + 10*numChildren + 'px');
shrmn
  • 1,303
  • 13
  • 19