Sélectionner tous les éléments qui ont un CSS spécifique, en utilisant jQuery

Question

Comment puis-je sélectionner tous les éléments ayant une propriété CSS spécifique, en utilisant jQuery? Par exemple:

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

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

Comment faire pour sélectionner par la propriété nommée "arrondi"?

Le nom de classe CSS est très flexible.

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

Comment remplacer cette opération en une opération. Peut-être quelque chose comme ceci:

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

Yat-il une meilleure façon de le faire?

Answer 1

Vous ne pouvez pas (en utilisant un sélecteur CSS) sélectionner des éléments en fonction des propriétés CSS qui leur ont été appliquées. Si vous voulez le faire manuellement, vous pouvez sélectionner tous les éléments du document, les parcourir et vérifier la valeur calculée de la propriété qui vous intéresse (cela ne fonctionnera probablement qu'avec de vraies propriétés CSS, mais pas composés tels que rounded). Ce serait aussi lent.

mise à jour en réponse aux modifications - group selectors:

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

Answer 2

C'est un fil de deux ans, mais il était encore utile pour moi il pourrait être utile à d'autres, peut-être. Voici ce que je fini par faire:

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

pas aussi succincte que je le voudrais, mais je ne l'ai jamais besoin de quelque chose comme ça sauf que maintenant, et ce n'est pas très efficace pour l'usage général de toute façon, comme je le vois.

Answer 3

Merci, Bijou. J'ai utilisé votre solution, mais utilisé le jQuery Css au lieu de javascript pur, comme celui-ci:

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

Cet exemple sélectionnerait tous les éléments où la valeur d'attribut font-family contient « Futura ».

Answer 4

propriétés CSS personnalisées ne sont pas héritées, doivent donc être appliquées directement à chaque élément (même si vous utilisez js pour ajouter dynamiquement des propriétés, vous devez le faire en ajoutant une classe), alors ...

CSS

.Title 
{ 
    color:red; 
} 

.Caption 
{ 
    color:black; 
} 

HTML

Vous n'avez pas besoin de définir un arrondi: true propriété du tout. Il suffit d'utiliser la présence de la classe 'Arrondi':

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

JS

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

Answer 5

similaires comme Bijou de.Juste un peu l'amélioration de bits:

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

Je pense en utilisant $ ('[classe]') est meilleure:

• pas besoin de coder en dur le sélecteur (s)
• ne vérifie pas tous les éléments HTML un par un.

Voici un example.

Answer 6

Voici un endroit propre, facile à comprendre solution:

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

Cette solution est différente parce qu'elle n'utilise pas de coin, filtre ou retour. Il est intentionnellement fait pour un plus large public d'utilisateurs.

choses à remplacer:

1. Replace ".dom classe" avec votre sélecteur.
2. Remplacez la propriété et la valeur CSS par ce que vous recherchez.
3. Remplacer "doThingsHere()" par ce que vous voulez exécuter sur cet élément trouvé.