A .container
can contain many .components
, and .components
themselves can contain .containers
(which in turn can contain .components etc. etc.)
Given code like this:
$(".container .component").each(function(){ $(".container", this).css('border', '1px solid #f00'); });
What do I need to add to the line within the braces to select only the nested .containers
that have their width
in CSS set to auto
? I'm sure it's something simple, but I haven't really used jQuery all that much.
The most basic concept of jQuery is to "select some elements and do something with them." jQuery supports most CSS3 selectors, as well as some non-standard selectors.
In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.
class selector selects all elements with the specific class. The class refers to the class attribute of an HTML element. The class attribute is used to set a particular style for several HTML elements. Note: Do not start a class attribute with a number.
You may want to look into .filter()
.
Something like:
$('.container .component .container') .filter(function() {return $(this).css('width') == 'auto';}) .css({border: '1px solid #f00'});
$(".container .component").each(function() { $(".container", this).each(function() { if($(this).css('width') == 'auto') { $(this).css('border', '1px solid #f00'); } }); });
Similar to the other answer but since components can also have multiple containers, also needs the .each() check in here too for the width.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With