Zaznacz wszystkie elementy, które mają określony CSS, używając jQuery

Jak mogę wybrać wszystkie elementy, które mają określoną właściwość CSS, używając jQuery? Na przykład: 

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

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

Jak wybrać właściwość o nazwie "rounded"?

Nazwa klasy CSS jest bardzo elastyczna.

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

Jak zamienić te dwie operacje na jedną operację. Może coś takiego: 

$(".*->rounded").corner();
Czy jest na to jakiś lepszy sposób?
Author: Keavon, 2009-08-03
Source

6 answers

Nie można (używając selektora CSS) wybierać elementów na podstawie właściwości CSS, które zostały do nich zastosowane.

Jeśli chcesz to zrobić ręcznie, możesz wybrać każdy element w dokumencie, zapętlić go nad nim i sprawdzić obliczoną wartość właściwości, którą jesteś zainteresowany (prawdopodobnie zadziała to tylko z prawdziwymi właściwościami CSS, a nie zmyślonymi, takimi jak rounded). To również byłoby powolne.

Aktualizacja w odpowiedzi na edycje - selektory grup : 

$(".Title, .Caption").corner();
 31
Author: Quentin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-08-03 06:48:01

To jest dwuletni wątek, ale nadal był dla mnie przydatny, więc może być przydatny dla innych. Oto co zrobiłem: 

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

Nie tak zwięzłe, jak bym chciał, ale nigdy nie potrzebowałem czegoś takiego, z wyjątkiem teraz, i to nie jest zbyt wydajne do ogólnego użytku, jak to widzę.

 57
Author: Bijou Trouvaille,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-14 03:43:29

Dziękuję, Bijou. Użyłem Twojego rozwiązania, ale użyłem jQuery .css zamiast czystego javascript, jak to: 

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

Ten przykład wybierze wszystkie elementy, w których wartość atrybutu font-family zawiera "Futura".

 30
Author: Ivan Chaer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-08 16:36:00

Podobne do Bijou ' s. tylko trochę ulepszenia: 

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

Myślę, że użycie $('[class]') jest lepsze:

  • nie ma potrzeby kodowania selektora(ów)
  • nie sprawdzi wszystkich elementów HTML jeden po drugim.

Oto przykład.

 12
Author: AnthonyY,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-14 04:57:17

Oto czyste, łatwe do zrozumienia rozwiązanie: 

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

To rozwiązanie jest inne, ponieważ nie używa narożnika, filtra ani powrotu. Jest celowo stworzony dla szerszej grupy użytkowników.

Rzeczy do zastąpienia:

  1. Zastąp ".dom-klasa " z Twoim selektorem.
  2. Zastąp właściwość CSS i wartość tym, czego szukasz.
  3. Zastąp " doThingsHere()" tym, co chcesz wykonać na tym znaleziony element.
 1
Author: kintsukuroi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-22 02:25:51

Własne właściwości CSS nie są dziedziczone, więc muszą być stosowane bezpośrednio do każdego elementu (nawet jeśli używasz js do dynamicznego dodawania właściwości, powinieneś to zrobić dodając klasę), więc...

CSS 

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

Nie musisz definiować właściwości rounded:true. Wystarczy użyć obecności klasy "zaokrąglonej": 

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

JS 

jQuery( '.Rounded' ).corner();
 -1
Author: theworldsbestpies,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-28 00:17:39