jQuery:Você pode selecionar por regra CSS, não por classe?

Question

Um .container pode conter muitos .components, e os próprios .components podem conter .containers (que por sua vez podem conter .components etc.etc.)

Dado um código como este:

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

O que preciso adicionar à linha entre colchetes para selecionar apenas os .containers aninhados que têm sua largura em CSS definida como 'auto'?Tenho certeza que é algo simples, mas não tenho usado muito o jQuery.

Answer 1

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

Semelhante à outra resposta, mas como os componentes também podem ter vários contêineres, também é necessário verificar .each() aqui também para a largura.

Answer 2

Você pode querer investigar .filter().

Algo como:

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

Answer 3

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