JQuery .hasClass pour plusieurs valeurs dans une instruction if

Question

JQuery .hasClass pour plusieurs valeurs dans une instruction if

Demandé el 11 de Mai, 2012: Quand la question a-t-elle été
110384 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai une simple instruction if comme suit :

if ($('html').hasClass('m320')) {

// do stuff 

}

Cela fonctionne comme prévu. Cependant, je souhaite ajouter d'autres classes à la classe if statement pour vérifier si l'une des classes est présente dans le fichier <html> tag. J'ai besoin qu'il ne s'agisse pas de toutes les classes, mais de la présence d'au moins une classe, mais il peut y en avoir plus.

Mon cas d'utilisation est le suivant : j'ai des classes (par ex. m320 , m768 ) ajoutés pour différentes largeurs d'affichage, de sorte que je ne veux exécuter certaines actions Jquery que si la largeur est spécifique (classe).

Voici ce que j'ai essayé jusqu'à présent :

1.

if ($('html').hasClass('m320', 'm768')) {

// do stuff 

}

2.

if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) {

 // do stuff 

}

3.

 if ($('html').hasClass(['m320', 'm768'])) {

 // do stuff 

    }

Aucune de ces mesures ne semble fonctionner. Je ne suis pas sûr de ce que je fais de travers, mais probablement de ma syntaxe ou de ma structure.

Demandé el 11 de Mai, 2012 par Danny Englander

Answer 1

5 Réponses

Answer 2

171voto

elclanrs Points 40467

Vous pouvez utiliser is() au lieu de hasClass() :

if ($('html').is('.m320, .m768')) { ... }

Répondu el 11 de Mai, 2012 par elclanrs (40467 Points )

Answer 3

76voto

James Montagne Points 44517

Vous avez juste eu des parenthèses mal placées dans votre deuxième tentative.

var $html = $("html");

if ($html.hasClass('m320') || $html.hasClass('m768')) {

  // do stuff 

}

Répondu el 11 de Mai, 2012 par James Montagne (44517 Points )

Answer 4

31voto

jfriend00 Points 152127

Pour le plaisir, j'ai écrit une petite méthode complémentaire jQuery qui vérifiera la présence d'un nom de classe parmi plusieurs :

$.fn.hasAnyClass = function() {
    for (var i = 0; i < arguments.length; i++) {
        if (this.hasClass(arguments[i])) {
            return true;
        }
    }
    return false;
}

Ensuite, dans votre exemple, vous pourriez utiliser ceci :

if ($('html').hasAnyClass('m320', 'm768')) {

// do stuff 

}

Vous pouvez transmettre autant de noms de classes que vous le souhaitez.

Voici une version améliorée qui vous permet également de transmettre plusieurs noms de classes séparés par un espace :

$.fn.hasAnyClass = function() {
    for (var i = 0; i < arguments.length; i++) {
        var classes = arguments[i].split(" ");
        for (var j = 0; j < classes.length; j++) {
            if (this.hasClass(classes[j])) {
                return true;
            }
        }
    }
    return false;
}

if ($('html').hasAnyClass('m320 m768')) {
    // do stuff 
}

Démonstration de travail : http://jsfiddle.net/jfriend00/uvtSA/

Répondu el 11 de Mai, 2012 par jfriend00 (152127 Points )

Answer 5

28voto

Kolja Points 762

Cela peut être une autre solution :

if ($('html').attr('class').match(/m320|m768/)) {  
  // do stuff   
}

selon jsperf.com c'est aussi assez rapide.

Répondu el 31 de Mai, 2013 par Kolja (762 Points )

Answer 6

5voto

Ryan Steffer Points 41

Pour ceux qui s'interrogent sur les différents aspects de la performance avec toutes ces options, j'ai créé un cas jsperf ici : jsperf

En bref, l'utilisation de element.hasClass('class') est le plus rapide.

La meilleure solution suivante consiste à utiliser elem.hasClass('classA') || elem.hasClass('classB') . Une remarque à ce sujet : l'ordre est important ! Si la classe "classA" a plus de chances d'être trouvée, c'est elle qui doit être listée en premier ! Les énoncés de conditions OR sont retournés dès que l'un d'entre eux est rempli.

La plus mauvaise performance, et de loin, a été obtenue en utilisant element.is('.class') .

On trouve également dans le jsperf Fonction de CyberMonk y La solution de Kolja .

Répondu el 30 de Novembre, 2013 par Ryan Steffer (41 Points )

JQuery .hasClass pour plusieurs valeurs dans une instruction if

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

JQuery .hasClass pour plusieurs valeurs dans une instruction if

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: