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

Question

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

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

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

Как выбрать по названию "округлено"?

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

Похоже на Биджу. Небольшое улучшение:

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

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

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

Вот пример .

Answer 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();
    }
});

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

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

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

Answer 6

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

CSS

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

Вам вообще не нужно определять округлое: истинное свойство. Просто используйте наличие класса 'Rounded':

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

JS

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