Может ли jQuery выбирать по правилу CSS, а не по классу?

.container может содержать много .components, а сами .components могут содержать .containers (который, в свою очередь, может содержать .components и т.д. И т.д.)

Данный код выглядит так:

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

Что мне нужно добавить к строке в фигурных скобках, чтобы выбрать только вложенные .containers, для которых width в CSS установлено в auto? Я уверен, что это что-то простое, но я на самом деле не так уж много использовал jQuery.

Ответ 1

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

Подобно другому ответу, но поскольку компоненты могут также иметь несколько контейнеров, также нужна проверка .each() здесь для ширины.

Ответ 2

Вы можете посмотреть .filter().

Что-то вроде:

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

Ответ 3

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