Seleziona tutti gli elementi che hanno un CSS specifico, usando jQuery

Question

Come posso selezionare tutti gli elementi che hanno una specifica proprietà CSS applicata, usando jQuery? Ad esempio:

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

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

Come selezionare per proprietà denominata "arrotondato"?

Il nome della classe CSS è molto flessibile.

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

Come sostituire questa operazione con una sola operazione. Forse qualcosa di simile:

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

C'è un modo migliore per farlo?

Answer 1

Non è possibile (utilizzando un selettore CSS) selezionare gli elementi in base alle proprietà CSS che sono state applicate a loro.

Se si desidera eseguire questa operazione manualmente, è possibile selezionare ogni elemento del documento, scorrere su di essi e controllare il valore calcolato della proprietà a cui si è interessati (probabilmente con le proprietà CSS effettive, non quelli inventati come rounded). Sarebbe anche lento.

Aggiornamento in risposta alle modifiche - group selectors:

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

Answer 2

Questa è una discussione di due anni, ma è stato comunque utile per me in modo che possa essere utile ad altri, forse. Ecco quello che ho finito per fare:

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

non come succinta come vorrei, ma non ho mai avuto bisogno di qualcosa di simile solo che adesso, e non è molto efficiente per uso generale in ogni caso, come la vedo io.

Answer 3

Grazie, Bijou. Ho usato la vostra soluzione, ma usato il jQuery CSS invece di puro javascript, in questo modo:

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

Questo esempio selezionare tutti gli elementi in cui il valore di attributo font-family contiene "Futura".

proprietà

Answer 4

personalizzati CSS non sono ereditati, quindi devono essere applicati direttamente a ciascun elemento (anche se si utilizza js aggiungere dinamicamente le proprietà, si dovrebbe fare con l'aggiunta di una classe), quindi ...

CSS

.Title 
{ 
    color:red; 
} 

.Caption 
{ 
    color:black; 
} 

HTML

non è necessario definire un arrotondato: vera proprietà a tutti. Basta usare la presenza della classe 'arrotondato':

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

JS

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

Answer 5

Simile come Bijou di.Solo un po valorizzazione bit:

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

penso utilizzando $ ('[classe]') è migliore:

• nessuna necessità di codificare duro il selettore (s)
• non controllerà tutti gli elementi HTML uno per uno.

Ecco uno example.

Answer 6

Ecco un ambiente pulito facile da capire soluzione:

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

Questa soluzione è diverso perché non usa angolo, filtro o di ritorno. È fatto intenzionalmente per un pubblico più ampio di utenti.

Cose da sostituire:

1. sostituire ".dom-class" con il selettore.
2. Sostituisci proprietà CSS e valore con quello che stai cercando.
3. Sostituire "doThingsHere()" con quello che si desidera eseguire su quell'elemento trovato .