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

Question

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ć według właściwości o nazwie "zaokrąglone"?

nazwa klasy CSS jest bardzo elastyczny.

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

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

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

Czy istnieje lepszy sposób to zrobić?

Answer 1

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

Jeśli chcesz zrobić to ręcznie, możesz wybrać każdy element w dokumencie, zapętlić je i sprawdzić obliczoną wartość interesującej Cię nieruchomości (prawdopodobnie działałoby to tylko z rzeczywistymi właściwościami CSS, ale nie wykonane takie jak rounded). Byłoby to również powolne.

Update w odpowiedzi na modyfikacje - group selectors:

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

Answer 2

To dwulatka nici, ale wciąż było przydatne do mnie, więc to może być przydatne dla innych, być może. Oto, co skończyło się robi:

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

nie tak zwięzły, jak bym chciał, ale nigdy nie potrzebowałem czegoś takiego chyba teraz, i to nie jest bardzo skuteczny do ogólnego użytku tak, jak ja to widzę.

Answer 3

Dziękuję, Bijou. Kiedyś swoje rozwiązanie, ale używany jQuery .css zamiast czystego javascript, podobnie jak to:

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

Ten przykład wybrać wszystkie elementy, w którym wartość atrybutu font-family zawiera „Futura”.

właściwości

Answer 4

Niestandardowe CSS nie są dziedziczone, więc musi być stosowana bezpośrednio do każdego elementu (nawet jeśli używasz js dynamicznie dodawać właściwości, należy to zrobić poprzez dodanie klasy), więc ...

CSS

.Title 
{ 
    color:red; 
} 

.Caption 
{ 
    color:black; 
} 

HTML

nie trzeba zdefiniować zaokrągloną: prawdziwy nieruchomości w ogóle. Wystarczy użyć obecność klasy 'Zaokrąglona':

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

JS

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

Answer 5

podobnie jak Bijou jest.Tylko trochę wzmocnienie nieco:

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

myślę użyciu $ ('[klasa]') jest lepsza:

• nie trzeba ciężko kodem wybierak (s)
• nie sprawdzi wszystkie elementy HTML jeden po drugim.

Oto example.

Answer 6

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 inny, ponieważ nie korzysta z rożnego, filtr lub Return. Jest celowo stworzony dla szerszej publiczności użytkowników.

warte wymienić:

1. Zamień ".dom klasy" z selektora.
2. Zastąp własność i wartość CSS tym, czego szukasz.
3. Zastąp "doThingsHere()" tym, co chcesz wykonać na tym znalezionym elemencie .