Comment obtenir des classes CSS disponibles pour un objet?

Question

J'ai un document avec des éléments comme celui-ci:

<ul class="fx-startpoint"> 
    <li>some text</li> 
    <li>other text</li> 
</ul> 

Au début, je besoin de regarder avec jQuery pour tous les éléments ayant une classe commençant par fx-. Je pense que c'est possible avec $("class=^fx-") mais je dois regarder s'il y a d'autres classes pour cet élément disponible dans un fichier CSS commençant par fx- mais elles ne sont pas actuellement définies pour l'élément ou les sous-éléments (comme les li). Comment est-ce que je pourrais faire ceci avec jQuery/jQueryUI?

Answer 1

Une fourchette du jsFiddle que l'OP affiché: http://jsfiddle.net/mori57/kgqXY/

function GetAppliedCssRules($element) { 
    var appliedRules = []; 
    for (var x = 0; x < document.styleSheets.length; x++) { 
     var rules = document.styleSheets[x].cssRules; 
     for (var i = 0; i < rules.length; i++) { 
      var txt = rules[i].selectorText; 
      if (txt.indexOf('.fx-') > -1) { 
       appliedRules.push(txt); 
      } 
     } 
    } 
    return appliedRules; 
} 

Plus précisément, vous êtes juste changer la recherche de chercher .fx-, qui peut être fait avec un simple .indexOf. Regex est également possible (comme plusieurs autres affiches mentionnées).

Answer 2

var classList =$('#divId').attr('class').split(/\s+/); 

classList retourne un tableau de classes: Ensuite, vous pouvez itérer et trouver celui que vous voulez par.

var classList =$('#divId').attr('class').split(/\s+/); 
$.each(classList, function(index, item){ 
if (item === 'someClass') { 
    //do something 
} 
}); 

Answer 3

Le sélecteur class=^fx- trouverait que des éléments comme celui-ci:

<div class="fx-foo bar">...</div> 

... et pas ceux comme ceci:

<div class="bar fx-foo">...</div> 

... parce que le fx- ne semble pas au commençant de l'attribut. Si vous avez le deuxième formulaire, malheureusement votre seule option est de regarder tous les éléments et de filtrer ceux qui n'ont pas de classe fx-xxx dessus. Il n'y a actuellement aucun sélecteur pour "contient un mot commençant par". Comme pour trouver toutes les règles définissant un sélecteur de classe à partir de fx-, vous pouvez le faire. document.styleSheets vous donne une liste de toutes les feuilles de style appliquées au document en cours. Chaque objet de la feuille de style a une liste des règles qui lui sont définies (ce sera cssRules ou seulement rules selon l'âge et la marque du navigateur). Chaque règle (CSSStyleRule object) contient des informations sur la règle, y compris selectorText, ce qui vous donne le sélecteur complet de la règle. Vous pouvez donc analyser ce sélecteur pour voir s'il définit une règle de classe commençant par fx-. Assurez-vous de laisser des virgules en regardant le sélecteur (par exemple, .foo, .fx-bar { ... }), et méfiez-vous que les chaînes du sélecteur d'analyse, bien que pas dur, est non-trivial.