JQuery hasClass for multiple values in an if statement

Question

I have a simple if statement as such   if     html   hasClass  m320          do stuff       This works as expected  However  I want to add more classes to the if statement to check if any of the classes are present in the  lt html gt  tag  I need it so it s not all of them but just the presence of at least one class but it can be more    My use case is that I have classes  e g  m320  m768  added for various viewport widths so I only want to execute certain Jquery if it s a specific width  class    Here is what i have tried so far   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           None of these seem to work though  Not sure what I am doing wrong but most likely my syntax or structure

User · Answer

For anyone wondering about some of the different performance aspects with all of these different options, I've created a jsperf case here: jsperf

In short, using element.hasClass('class') is the fastest.

Next best bet is using elem.hasClass('classA') || elem.hasClass('classB'). A note on this one: order matters! If the class 'classA' is more likely to be found, list it first! OR condition statements return as soon as one of them is met.

The worst performance by far was using element.is('.class').

Also listed in the jsperf is CyberMonk's function, and Kolja's solution.

User · Answer

var classes      html   0  className   if  classes indexOf  m320      -1    classes indexOf  m768      -1          do something

User · Answer

You just had some messed up parentheses in your 2nd attempt   var  html      html     if   html hasClass  m320       html hasClass  m768            do stuff

User · Answer

This is in case you need both classes present  For either or logic just use       el   hasClass  first-class         el   hasClass  second-class    Feel free to optimize as needed

User · Answer

You could use is   instead of hasClass     if     html   is   m320   m768

User · Answer

For fun  I wrote a little jQuery add-on method that will check for any one of multiple class names     fn hasAnyClass   function         for  var i   0  i  lt  arguments length  i              if  this hasClass arguments i                  return true                      return false      Then  in your example  you could use this   if     html   hasAnyClass  m320    m768          do stuff       You can pass as many class names as you want     Here s an enhanced version that also lets you pass multiple class names separated by a space     fn hasAnyClass   function         for  var i   0  i  lt  arguments length  i              var classes   arguments i  split               for  var j   0  j  lt  classes length  j                  if  this hasClass classes j                      return true                                    return false     if     html   hasAnyClass  m320 m768             do stuff      Working demo  http   jsfiddle net jfriend00 uvtSA

User · Answer

Here is a slight variation on answer offered by jfriend00     fn hasAnyClass   function         var classes   arguments 0  split           for  var i   0  i  lt  classes length  i              if  this hasClass classes i                  return true                      return false      Allows use of same syntax as  addClass   and  removeClass    e g    hasAnyClass  m320 m768    Needs bulletproofing  of course  as it assumes at least one argument

User · Answer

This may be another solution   if     html   attr  class   match  m320 m768             do stuff          according to jsperf com it s quite fast  too

User · Answer

The hasClass method will accept an array of class names as an argument  you can do something like this     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

User · Answer

Try this   if     html   hasClass  class1 class2          do stuff

[javascript] JQuery .hasClass for multiple values in an if statement

Examples related to javascript

Examples related to jquery

Examples related to syntax

Examples related to logic