Best IT Recipes

JQuery.hasClass for multiple values ​​in if statement

I have a simple if statement:

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

This works as expected. However, I want to add more classes in the if statement to check if any of the classes are present in the <html> . I need this so that 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 different viewport widths, so I only want to execute a specific jQuery if it's a specific width (class).

Here is what I have tried so far:

one.

 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 this seems to work. Not sure what I'm doing wrong, but most likely my syntax or structure.

+52
javascript jquery syntax logic
May 11 '12 at 21:55
source share
10 answers

You had just spoiled parentheses in the second attempt.

 var $html = $("html"); if ($html.hasClass('m320') || $html.hasClass('m768')) { // do stuff }
+51
May 11 '12 at 9:57 a.m.
source share
β€” -

You can use is() instead of hasClass() :

 if ($('html').is('.m320, .m768')) { ... }
+115
May 11 '12 at 21:58
source share

For fun, I wrote a small jQuery add method that will check for one of several class names:

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

Then in your example you can use this:

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

You can pass as many class names as you want.



Here's an extended version, which also allows you to pass multiple class names separated by spaces:

 $.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 }

Working demo: http://jsfiddle.net/jfriend00/uvtSA/

+21
May 11 '12 at 10:11
source share

This may be another solution:

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

according to jsperf.com is also pretty fast.

+18
May 31 '13 at 13:50
source share

For those who are wondering about some aspects of performance with all of these different options, I created the jsperf case here: jsperf

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

The next best bet uses elem.hasClass('classA') || elem.hasClass('classB') elem.hasClass('classA') || elem.hasClass('classB') . Note on this: order matters! If the class "classA" is likely to be found, list it first! OR statements are returned as soon as one of them occurs.

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

Also listed in jsperf are the CyberMonk function and the Kolja solution .

+5
Nov 30 '13 at 0:34
source share

Below is a small answer to 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; }

Allows the use of the same syntax as .addClass () and .removeClass (). for example .hasAnyClass('m320 m768') Of course, you need armor protection, since it involves at least one argument.

+3
Feb 15 '13 at 2:32
source share
 var classes = $('html')[0].className; if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) { //do something }
0
May 11 '12 at PM
source share

The hasClass method will take 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(); });
0
Oct 12 '16 at 14:25
source share

I tested several classes in the hasClass method parameter and it works as expected.

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

This is if you need both classes. For either or logic just use ||

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

Feel free to optimize as needed

0
Nov 09 '17 at 17:29
source share

Try the following:

 if ($('html').hasClass('class1 class2')) { // do stuff }
-3
Oct 14 '16 at 11:49
source share


More articles:


All Articles