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

Question

Come posso selezionare tutti gli elementi a cui è stata applicata una proprietà CSS specifica, usando jQuery? Ad esempio:

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

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

Come selezionare per proprietà denominata " arrotondata " ;?

Il nome della classe CSS è molto flessibile.

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

Come sostituire queste due operazioni con una sola operazione. Forse qualcosa del genere:

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

Esiste un modo migliore per farlo?

Answer 1

Non è possibile (utilizzando un selettore CSS) selezionare gli elementi in base alle proprietà CSS ad essi applicate.

Se vuoi farlo manualmente, puoi selezionare tutti gli elementi nel documento, scorrere su di essi e controllare il valore calcolato della proprietà che ti interessa (probabilmente funzionerebbe solo con proprietà CSS reali, ma non fatte quelli come arrotondato ). Sarebbe anche lento.

Aggiornamento in risposta alle modifiche & # 8212; selettori di gruppo :

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

Answer 2

Questo è un thread di due anni, ma è stato ancora utile per me, quindi potrebbe essere utile per gli altri, forse. Ecco cosa ho finito per fare:

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

non così succinto come vorrei, ma non ho mai avuto bisogno di qualcosa del genere tranne adesso, e non è comunque molto efficiente per uso generale, come lo vedo.

Answer 3

Grazie, Bijou. Ho usato la tua soluzione, ma ho usato jQuery .css invece di javascript puro, in questo modo:

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

Questo esempio selezionerebbe tutti gli elementi in cui il valore dell'attributo font-family contiene " Futura " ;.

Answer 4

Simile a Bijou. Solo un po 'di miglioramento:

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

Penso che usare $ ('[class]') sia migliore:

• non è necessario codificare il / i selettore / i
• non controlla tutti gli elementi HTML uno per uno.

Ecco un esempio .

Answer 5

Ecco una soluzione pulita e di facile comprensione:

// 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 è diversa perché non utilizza corner, filter o return. È intenzionalmente creato per un pubblico più vasto di utenti.

Cose da sostituire:

1. Sostituisci " .dom-class " con il tuo selettore.
2. Sostituisci la proprietà e il valore CSS con ciò che stai cercando.
3. Sostituisci " doThingsHere () " con quello che vuoi eseguire su questo elemento trovato.

Answer 6

Le proprietà CSS personalizzate non vengono ereditate, quindi devono essere applicate direttamente a ciascun elemento (anche se usi js per aggiungere proprietà dinamicamente, dovresti farlo aggiungendo una classe), quindi ...

CSS

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

Non è necessario definire affatto una proprietà arrotondata: true. Usa solo la presenza della classe 'Rounded':

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

JS

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