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

Question

Comment puis-je sélectionner tous les éléments auxquels une propriété CSS spécifique est appliquée, à l'aide de jQuery? Par exemple:

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

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

Comment sélectionner une propriété nommée "arrondi"?

Le nom de la classe CSS est très flexible.

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

Comment remplacer ces deux opérations en une seule opération. Peut-être que quelque chose comme ça:

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

Existe-t-il une meilleure façon de procéder?

Answer 1

Vous ne pouvez pas (à l'aide d'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 survoler et vérifier la valeur calculée de la propriété qui vous intéresse (cela ne fonctionnerait probablement qu'avec de vraies propriétés CSS, mais pas telles que arrondi ). Ce serait aussi lent.

Mise à jour en réponse aux modifications & # 8212; sélecteurs de groupe :

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

Answer 2

Il s’agit d’un fil vieux de deux ans, mais il m’était toujours utile, alors il pourrait peut-être être utile à d’autres. Voici ce que j'ai fini par faire:

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

pas aussi succinct que je le souhaiterais, mais je n’ai jamais eu besoin de quelque chose comme ça, sauf maintenant, et ce n’est pas très efficace pour un usage général de toute façon, comme je le vois.

Answer 3

Merci, Bijou. J'ai utilisé votre solution, mais le fichier jQuery .css au lieu de JavaScript pur, comme ceci:

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

Cet exemple sélectionnerait tous les éléments pour lesquels la valeur de l'attribut font-family contient "Futura".

Answer 4

Similaire à celui de Bijou. Juste une petite amélioration:

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

Je pense que l'utilisation de $ ('[class]') est préférable:

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

Voici un exemple .

Answer 5

Voici une solution propre et facile à comprendre:

// 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 car elle n’utilise ni angle, ni filtre, ni retour. Il est intentionnellement conçu pour un public plus large.

Choses à remplacer:

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

Answer 6

Les propriétés CSS personnalisées ne sont pas héritées, elles 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), donc ...

CSS

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

Il n'est pas nécessaire de définir une propriété arrondie: true. Il suffit d’utiliser la présence de la classe 'Rounded':

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

JS

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