Determine if an element has a CSS class with jQuery

Question

I m working with jQuery and looking to see if there is an easy way to determine if the element has a specific CSS class associated with it   I have the id of the element  and the CSS class that I m looking for   I just need to be able to  in an if statement  do a comparison based on the existence of that class on the element

User · Answer

from the FAQ  elem       elemid    if  elem is    class            whatever     or   elem       elemid    if  elem hasClass   class            whatever

User · Answer

In my case   I used the  is  a jQuery function  I had a HTML element with different css classes added   I was looking for a specific class in the middle of these   so I used the  is  a good alternative to check a class dynamically added to an html element   which already has other css classes  it is another good alternative   simple example       lt  --element html-- gt    lt nav class  cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open  id  menu  gt somethings here     lt  nav gt     lt  --jQuery  is -- gt       menu   is   cbp-spmenu-open      advanced example       lt  --element html-- gt       lt nav class  cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open  id  menu  gt somethings here     lt  nav gt       lt  --jQuery  is -- gt      if     menu   is   cbp-spmenu-bottom cbp-spmenu-open                menu   show

User · Answer

In the interests of helping anyone who lands here but was actually looking for a jQuery free way of doing this   element classList contains  your-class-name

User · Answer

Check the official jQuery FAQ page    How do I test whether an element has perticular class or not

User · Answer

Use the hasClass method   jQueryCollection hasClass className     or    selector  hasClass className     The argument is  obviously  a string representing the class you are checking  and it returns a boolean  so it doesn t support chaining like most jQuery methods    Note  If you pass a className argument that contains whitespace  it will be matched literally against the collection s elements  className string  So if  for instance  you have an element    lt span class  foo bar    gt    then this will return true      span   hasClass  foo bar     and these will return false      span   hasClass  bar foo      span   hasClass  foo  bar

User · Answer

from the FAQ  elem       elemid    if  elem is    class            whatever     or   elem       elemid    if  elem hasClass   class            whatever

User · Answer

As for the negation  if you want to know if an element hasn t a class you can simply do as Mark said   if   currentPage parent   hasClass  home      do what you want

User · Answer

from the FAQ  elem       elemid    if  elem is    class            whatever     or   elem       elemid    if  elem hasClass   class            whatever

User · Answer

Use the hasClass method   jQueryCollection hasClass className     or    selector  hasClass className     The argument is  obviously  a string representing the class you are checking  and it returns a boolean  so it doesn t support chaining like most jQuery methods    Note  If you pass a className argument that contains whitespace  it will be matched literally against the collection s elements  className string  So if  for instance  you have an element    lt span class  foo bar    gt    then this will return true      span   hasClass  foo bar     and these will return false      span   hasClass  bar foo      span   hasClass  foo  bar

User · Answer

In my case   I used the  is  a jQuery function  I had a HTML element with different css classes added   I was looking for a specific class in the middle of these   so I used the  is  a good alternative to check a class dynamically added to an html element   which already has other css classes  it is another good alternative   simple example       lt  --element html-- gt    lt nav class  cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open  id  menu  gt somethings here     lt  nav gt     lt  --jQuery  is -- gt       menu   is   cbp-spmenu-open      advanced example       lt  --element html-- gt       lt nav class  cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open  id  menu  gt somethings here     lt  nav gt       lt  --jQuery  is -- gt      if     menu   is   cbp-spmenu-bottom cbp-spmenu-open                menu   show

User · Answer

Without jQuery   var hasclass        elem className      indexOf   check class    1    Or   function hasClass e c       return e amp  amp  e instanceof HTMLElement  amp  amp         e className      indexOf     c      1       example of usage   var has class medium hasClass document getElementsByTagName  input   0   medium      This is WAY faster than jQuery

User · Answer

Check the official jQuery FAQ page    How do I test whether an element has perticular class or not

User · Answer

segment-name   click function          if   this  hasClass  segment-a               class exist

User · Answer

Use the hasClass method   jQueryCollection hasClass className     or    selector  hasClass className     The argument is  obviously  a string representing the class you are checking  and it returns a boolean  so it doesn t support chaining like most jQuery methods    Note  If you pass a className argument that contains whitespace  it will be matched literally against the collection s elements  className string  So if  for instance  you have an element    lt span class  foo bar    gt    then this will return true      span   hasClass  foo bar     and these will return false      span   hasClass  bar foo      span   hasClass  foo  bar

User · Answer

As for the negation  if you want to know if an element hasn t a class you can simply do as Mark said   if   currentPage parent   hasClass  home      do what you want

User · Answer

segment-name   click function          if   this  hasClass  segment-a               class exist

User · Answer

Without jQuery   var hasclass        elem className      indexOf   check class    1    Or   function hasClass e c       return e amp  amp  e instanceof HTMLElement  amp  amp         e className      indexOf     c      1       example of usage   var has class medium hasClass document getElementsByTagName  input   0   medium      This is WAY faster than jQuery

User · Answer

from the FAQ  elem       elemid    if  elem is    class            whatever     or   elem       elemid    if  elem hasClass   class            whatever

User · Answer

Use the hasClass method   jQueryCollection hasClass className     or    selector  hasClass className     The argument is  obviously  a string representing the class you are checking  and it returns a boolean  so it doesn t support chaining like most jQuery methods    Note  If you pass a className argument that contains whitespace  it will be matched literally against the collection s elements  className string  So if  for instance  you have an element    lt span class  foo bar    gt    then this will return true      span   hasClass  foo bar     and these will return false      span   hasClass  bar foo      span   hasClass  foo  bar

User · Answer

In the interests of helping anyone who lands here but was actually looking for a jQuery free way of doing this   element classList contains  your-class-name

[javascript] Determine if an element has a CSS class with jQuery

Examples related to javascript

Examples related to jquery

Examples related to css