Выберите все элементы с определенным CSS, используя jQuery

Как я могу выбрать все элементы с определенным свойством CSS, используя jQuery? Например:

.Title
{
    color:red;
    rounded:true;
}

.Caption
{
    color:black;
    rounded:true;
}

Как выбрать свойство с именем "rounded"?

Имя класса CSS очень гибкое.

$(".Title").corner();
$(".Caption").corner();

Как заменить эту две операции на одну операцию. Может быть, что-то вроде этого:

$(".*->rounded").corner();

Есть ли лучший способ сделать это?

Ответы

Ответ 1

Вы не можете (используя селектор CSS) выбирать элементы на основе свойств CSS, которые были применены к ним.

Если вы хотите сделать это вручную, вы можете выбрать каждый элемент в документе, перебрать их и проверить вычисленное значение интересующего вас объекта (это, вероятно, будет работать только с реальными свойствами CSS, но не сделано например, rounded). Это также было бы медленным.

Обновление в ответ на изменения - селектора групп:

$(".Title, .Caption").corner();

Ответ 2

Это двухгодичный поток, но мне все же было полезно, чтобы он мог быть полезным другим. Вот что я сделал:

var x = $('.myselector').filter(function () { 
    return this.style.some_prop == 'whatever' 
});

не так лаконично, как хотелось бы, но я никогда не нуждался в чем-то подобном, кроме как сейчас, и он не очень эффективен для общего использования, как я вижу.

Ответ 3

Спасибо, Бижу. Я использовал ваше решение, но использовал jQuery.css вместо чистого javascript, например:

var x = $('*').filter(function() {
    return $(this).css('font-family').toLowerCase().indexOf('futura') > -1
})

В этом примере будут отобраны все элементы, в которых значение атрибута font-family содержит "Futura".

Ответ 4

Аналогично Bijou's. Просто немного улучшилось:

$('[class]').filter(function() {
    return $(this).css('your css property') == 'the expected value';
  }
).corner();

Я думаю, что использование $('[class]') лучше:

  • Не нужно жестко кодировать селектор (ы)
  • не будет проверять все элементы HTML один за другим.

Вот пример .

Ответ 5

Вот чистое, понятное решение:

// find elements with jQuery with a specific CSS, then execute an action
$('.dom-class').each(function(index, el) {
    if ($(this).css('property') == 'value') {
        $(this).doThingsHere();
    }
});

Это решение отличается тем, что оно не использует угол, фильтр или возврат. Он намеренно предназначен для более широкой аудитории пользователей.

Что нужно заменить:

  • Замените ".dom-class" на свой селектор.
  • Замените свойство и значение CSS тем, что вы ищете.
  • Замените "doThingsHere()" тем, что вы хотите выполнить на этом найденный элемент.

Ответ 6

Пользовательские свойства CSS не наследуются, поэтому их следует применять непосредственно к каждому элементу (даже если вы используете js для динамического добавления свойств, вы должны сделать это, добавив класс), поэтому...

CSS

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

Вам вообще не нужно определять свойство rounded: true. Просто используйте присутствие класса "Округлый":

<div class='Title Rounded'><h1>Title</h1></div>
<div class='Caption Rounded'>Caption</div>

JS

jQuery( '.Rounded' ).corner();