jQuery: Est-il possible de sélectionner des éléments avec une seule classe parmi les éléments qui, potentiellement, jusqu'à 3 classes?

Par exemple, dire que j'ai les suivantes: 

<span class="a b c">Has class a, b, and c</span>  
<span class="a">Has class a</span>  
<span class="b c">Has class b and c</span> 
<span class="a c">Has class a and c</span> 
<span class="a c">Has class a and c</span> 
<span class="a">Has class a</span>

Maintenant, supposons que je veux sélectionner tous les éléments qui ont uniquement de classe.

Sens que la deuxième et dernière spans serait d'être sélectionné.

Est-il un moyen simple de faire cela?

InformationsquelleAutor Josh C. | 2011-12-14
  1. 34
    $('.a').not('.b, .c')

    Cela va sélectionner tous les éléments avec la classe a qui n'ont pas de b ou c. Cependant, ils pourraient encore avoir de la classe d, e, etc. L'utilisation de Phil réponse si vous ne souhaitez que des éléments avec aucune autre classe que a.

    • Upvoting parce que permettre aux classes indépendantes est sans doute préférable, dans beaucoup de cas, ainsi que le code résultant est plus propre. Alors que c'est moins "future proof", vous ne serez probablement pas réellement le genre d'avenir que ma réponse donne (qui correspond à la question exacte dans l'OP).
    InformationsquelleAutor maxedison
  2. 9

    (Voir ci-dessous pour expliquer pourquoi vous ne pourriez pas vouloir faire exactement ce qui est demandé dans la question)

    Vous pouvez utiliser le [class="a"] "attribut est égal à sélecteur", mais il est fragile:

    $('span[class="a"]').hide();

    Le problème est que si vous avez n'importe quel espace dans votre classe, attribut, il va se casser. Voir ce violon: http://jsfiddle.net/c7DP7/

    Vous pouvez résoudre ce problème en faisant une requête de base sur ces éléments à l'aide d'un sélecteur de classe normale, puis filtrer tout en vérifiant seulement a est réglé (et le parage des espaces dans le second filtre). Voir ce violon: http://jsfiddle.net/uD48E/1/

    $('.a')
    .filter(function(index){
        return $(this).attr("class").trim() == "a";
    })
    .hide();

    La question ressemble, c'est d'essayer de faire plus de "l'avenir" à l'épreuve du code, mais que l'approche spécifique est de plus en plus fragiles. Rejetant toutes les classes qui ne sont pas liées à la classe courante, vous êtes de filtrage pour peut casser des choses, pour des raisons non liées à la classe a (comme une autre classe d ou e qui est ajouté plus tard). Ceci est important si le code HTML que vous faites une demande à votre jQuery pour peut être modifié dans le futur.

    Une meilleure façon de le faire est de filtrer uniquement les classes qui ont un impact le sens de la classe a. Permettant pour ce type de flexibilité est réellement ce qui rend votre code plus à l'avenir. Voir maxedison réponse pour la meilleure façon de le faire.

    InformationsquelleAutor Merlyn Morgan-Graham
  3. 4

    Je suppose que si vous voulais pour ce faire, il vous suffit de faire:

    var spans = $("span[class='a']");
    • Brève note à l'OP: vous n'avez pas à inclure le mot span dans le sélecteur comme Phil a ici. Si il y a des divs ou les dhceu qui pourraient avoir la classe souhaitée, et vous souhaitez sélectionner ceux qui, $("[class='a']") de le faire.
    • Le problème avec ceci est que si l'attribut contient des espaces, il va se casser. Des sélecteurs de classe n'ont pas ce problème.
    InformationsquelleAutor Phil Klein
  4. 1

    Une autre méthode consiste à supprimer les classes et ensuite de vérifier si toutes les classes restent. Si non, exécuter la fonction:

    JS Fiddle

    $('.a').each(function () {
    var $this = $(this);
    if (!$this.removeClass('a').attr('class').length) {
       //Execute function here
    }
});
    InformationsquelleAutor Derek Story