Wählen Sie alle Elemente mit einem bestimmten CSS aus, indem Sie jQuery verwenden

Question

Wie kann ich alle Elemente auswählen, für die eine bestimmte CSS-Eigenschaft mit jQuery angewendet wurde? Zum Beispiel:

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

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

So wählen Sie nach Eigenschaft namens "gerundet"?

CSS Klassenname ist sehr flexibel.

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

Wie diese zwei Operation zu einer Operation zu ersetzen. Vielleicht etwas in der Art:

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

Gibt es einen besseren Weg, dies zu tun?

Answer 1

Sie können (mithilfe eines CSS-Selektors) keine Elemente auswählen, die auf den CSS-Eigenschaften basieren, die auf sie angewendet wurden.

Wenn Sie dies manuell tun möchten, können Sie jedes Element im Dokument auswählen, eine Schleife darüber ziehen und den berechneten Wert der Eigenschaft prüfen, die Sie interessiert (dies würde wahrscheinlich nur mit echten CSS-Eigenschaften funktionieren) wie zum Beispiel rounded). Es wäre auch langsam.

Aktualisierung in Reaktion auf Änderungen - group selectors:

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

Answer 2

Dies ist ein zwei Jahre alter Faden, aber es war mir immer noch nützlich, so dass es für andere nützlich sein könnte, vielleicht. Hier ist, was ich am Ende tun:

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

nicht so knapp wie ich möchte, aber ich habe noch nie so etwas wie dies außer jetzt benötigt, und es ist nicht sehr effizient für den allgemeinen Gebrauch wie auch immer, wie ich es sehe.

Answer 3

Danke, Bijou. Früher habe ich Ihre Lösung, sondern verwendet die jQuery .css anstelle von reinem JavaScript aktivieren, wie folgt aus:

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

Dieses Beispiel würde alle Elemente auswählen, in dem das font-family Attributwert „Futura“ enthält.

Answer 4

Benutzerdefinierte CSS-Eigenschaften werden nicht vererbt, so muss direkt auf jedes Element angewendet werden (auch wenn Sie js verwenden, um dynamisch Eigenschaften hinzufügen, sollten Sie es tun, indem Sie eine Klasse hinzufügen), so ...

CSS

.Title 
{ 
    color:red; 
} 

.Caption 
{ 
    color:black; 
} 

HTML

Sie brauchen keine gerundet zu definieren: an allen wahren Eigenschaft. Verwenden Sie einfach die Anwesenheit der 'Abgerundete' Klasse:

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

JS

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

Answer 5

ähnlich wie Bijou.Nur ein wenig Verbesserung:

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

Ich denke, $ ('[Klasse]') verwendet, ist besser:

• keine Notwendigkeit, hart Code der Selektor (e)
• nicht überprüfen Alle HTML-Elemente eins nach dem anderen.

Hier ist ein example.

Answer 6

Hier ist eine saubere, leicht zu verstehen Lösung:

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

Diese Lösung ist anders, weil es nicht Ecke, Filter oder Rückgabe nicht verwendet. Es ist absichtlich für ein breiteres Publikum von Benutzern gemacht.

Aktivitäten ersetzen:

1. Ersetzen ".dom-Klasse" mit Ihrem Wähler.
2. Ersetzen Sie CSS-Eigenschaft und Wert mit dem, was Sie suchen.
3. Ersetzen Sie "doThingsHere()" mit dem, was Sie auf dem gefunden Element ausführen möchten.