Can jQuery select by CSS rule, not class?

Question

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.

Solution 1

$(".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.

Solution 2

You may want to look into .filter().

Something like:

$('.container .component .container')
.filter(function() {return $(this).css('width') == 'auto';})
.css({border: '1px solid #f00'});

Solution 3

$(".container .component").each(function() {
    if ($(".container", this).css('width') === "auto")
        $(".container", this).css('border', '1px solid #f00');
});