web-dev-qa-db-fra.com

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

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 par propriété nommée "arrondie"?

Le nom de classe CSS est très flexible.

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

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

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

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

javascriptjquerycssjquery-selectors
58
ebattulga

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 parcourir en boucle 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 celles créées par exemple) comme rounded). Ce serait également lent.

Mise à jour en réponse aux modifications - sélecteurs de groupe :

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

Il s'agit d'un fil de deux ans, mais il m'a quand même été utile, il pourrait donc ê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 une utilisation générale de toute façon, comme je le vois.

63
Bijou Trouvaille

Merci, Bijou. J'ai utilisé votre solution, mais j'ai utilisé le jQuery .css au lieu du 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 où le font-family la valeur de l'attribut contient "Futura".

35
Ivan Chaer

Similaire à Bijou. Juste une petite amélioration:

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

Je pense qu'il est préférable d'utiliser $ ('[class]'):

  • pas besoin de coder en dur le ou les sélecteurs
  • ne vérifiera pas tous les éléments HTML un par un.

Voici un exemple .

14
AnthonyY

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 pas de coin, de filtre ou de retour. Il est intentionnellement conçu pour un public plus large d'utilisateurs.

Choses à remplacer:

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