web-dev-qa-db-fra.com

JQuery .hasClass pour plusieurs valeurs dans une instruction if

J'ai une simple déclaration if en tant que telle:

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

// do stuff 

}

Cela fonctionne comme prévu. Cependant, je souhaite ajouter plus de classes au if statement pour vérifier si l'une des classes est présente dans la balise <html>. J'en ai besoin, donc ce n'est pas tous, mais la présence d'au moins un cours, mais ça peut être plus. 

Mon cas d'utilisation est que des classes (par exemple, m320, m768) ont été ajoutées pour différentes largeurs de fenêtre d'affichage, de sorte que je souhaite uniquement exécuter certains Jquery s'il s'agit d'une largeur 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 

    }

Aucun de ceux-ci ne semble cependant fonctionner. Pas sûr de ce que je fais mal mais très probablement de ma syntaxe ou de ma structure. 

javascriptjquerysyntaxlogic
67
Danny Englander

Vous venez d'avoir quelques parenthèses foirées dans votre deuxième tentative.

var $html = $("html");

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

  // do stuff 

}
59
James Montagne

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

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

Pour le plaisir, j'ai écrit une petite méthode complémentaire jQuery qui vérifie n'importe lequel des noms de classe:

$.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 classe 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émo de travail: http://jsfiddle.net/jfriend00/uvtSA/

25
jfriend00

Cela peut être une autre solution:

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

selon jsperf.com c'est assez rapide aussi.

22
Kolja

Pour ceux qui s’interrogent sur les différents aspects des performances avec toutes ces options, j’ai créé un cas jsperf ici: jsperf

En bref, utiliser element.hasClass('class') est le plus rapide.

Le meilleur choix suivant est d'utiliser elem.hasClass('classA') || elem.hasClass('classB'). Une note sur celui-ci: l'ordre compte! Si la classe 'classA' est plus susceptible d'être trouvée, énumérez-la d'abord! Les instructions de condition OR sont renvoyées dès que l'une d'entre elles est remplie.

La pire performance était de loin en utilisant element.is('.class').

La fonction de CyberMonk , et la solution de Kolja sont également listées dans le fichier jsperf.

5
Ryan Steffer

Voici une légère variation de réponse proposée par jfriend00:

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

Permet l'utilisation de la même syntaxe que .addClass () et .removeClass (). Par exemple, .hasAnyClass('m320 m768') Nécessite une protection anti-balles, car elle suppose au moins un argument.

3
CyberMonk
var classes = $('html')[0].className;

if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) {
    //do something
}
0
adeneo

La méthode hasClass acceptera un tableau de noms de classe en tant qu'argument, vous pouvez faire quelque chose comme ceci:

$(document).ready(function() {
function filterFilesList() {
    var rows = $('.file-row');
    var checked = $("#filterControls :checkbox:checked");

    if (checked.length) {
        var criteriaCollection = [];

        checked.each(function() {
            criteriaCollection.Push($(this).val());
        });

        rows.each(function() {
            var row = $(this);
            var rowMatch = row.hasClass(criteriaCollection);

            if (rowMatch) {
                row.show();
            } else {
                row.hide(200);
            }
        });
    } else {
        rows.each(function() {
            $(this).show();
        });
    }
}

    $("#filterControls :checkbox").click(filterFilesList);
    filterFilesList();
});
0
Ron Sims II

J'ai testé plusieurs classes dans un paramètre de la méthode hasClass et cela fonctionne comme prévu.

$('el').hasClass('first-class second-class');

C'est au cas où vous auriez besoin des deux classes. Pour l'un ou l'autre logique, utilisez simplement ||

$('el').hasClass('first-class') || $('el').hasClass('second-class')

N'hésitez pas à optimiser au besoin

0
qwerty_igor