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

Question

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

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

.Title

{

    color:red;

    rounded:true;

}



.Caption

{

    color:black;

    rounded:true;

}

как выбрать по свойству с именем "округленный"?

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

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

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

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

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

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

589 6

jQuery javascript css jquery-selectors

6 ответов:

Comments

Ничего не найдено.

Quentin · Accepted Answer · 2009-08-03 09:48:01

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

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

обновление в ответ на изменения - группа селекторы:
$(".Title, .Caption").corner();

Bijou Trouvaille · Accepted Answer · 2013-01-14 05:43:29

это двухлетний поток, но он все еще был полезен для меня, поэтому он может быть полезен другим, возможно. Вот что я в конечном итоге сделал:
var x = $('.myselector').filter(function () { 
    return this.style.some_prop == 'whatever' 
});
не так лаконично, как хотелось бы, но мне никогда не было нужно что-то подобное, кроме как сейчас, и это не очень эффективно для общего использования в любом случае, как я вижу.

Ivan Chaer · Accepted Answer · 2018-02-08 18:36:00

спасибо, Бижу. Я использовал ваше решение, но использовал jQuery .css вместо чистого javascript, например:
var x = $('*').filter(function() {
    return $(this).css('font-family').toLowerCase().indexOf('futura') > -1
})
в этом примере будут выбраны все элементы, где font-family значение атрибута содержит "Futura".

AnthonyY · Accepted Answer · 2013-01-14 06:57:17

похожие как Бижу по. Просто немного улучшение:
$('[class]').filter(function() {
    return $(this).css('your css property') == 'the expected value';
  }
).corner();
Я думаю, что использование $('[class]') лучше:

нет необходимости жестко кодировать селектор(ы)

не будет проверять все элементы HTML по одному.

здесь пример.

kintsukuroi · Accepted Answer · 2017-07-22 05:25:51

вот чистое, простое для понимания решение:
// 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-класс " с вашим селектором.

заменить CSS свойство и значение с тем, что вы ищете.

заменить "doThingsHere ()" на то, что вы хотите выполнить на этом найдено элемент.

theworldsbestpies · Accepted Answer · 2012-09-28 03:17:39

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

CSS
.Title
{
    color:red;
}

.Caption
{
    color:black;
}
HTML

вам не нужно определять округленное:true свойство вообще. Просто используйте наличие класса 'Rounded':
<div class='Title Rounded'><h1>Title</h1></div>
<div class='Caption Rounded'>Caption</div>
JS
jQuery( '.Rounded' ).corner();