5

Hi I am trying to check if an element has the classes I am finding ex:

<span class="foo bar me"></span>

I want to check if the foo and me class is present on that element so I used this:

$('body span').hasClass('me', 'foo')

this foo and me is stored in an array but this one didn't work:

var arrayName = ['me', 'foo'];
$('body span').hasClass(arrayName)

the classes I am finding is dynamic that's why it is stored in an array, how can pass the dynamic array like the this one 'me', 'foo' to the hasClass function?

Note: the array can have 2-4 values in it.

I had my work here: https://jsfiddle.net/pcbttntk/

Thanks in Advance.

Update: $('body span').hasClass('me', 'foo') is not working, thanks to brett and Roko, it only checks the first class passed to it.

Cedric
  • 1,236
  • 2
  • 18
  • 35
  • That's wrong: `.hasClass('me', 'foo')`. – Roko C. Buljan Jan 27 '16 at 01:12
  • possible duplicate. please see http://stackoverflow.com/a/10559177/520544 – Jörn Jan 27 '16 at 01:13
  • Hi Jörn the case in this one is that the all class in the array must be present on that specific element, the answer on that question is just checking if one of the classes is present on the element, and the classes it check is not dynamic. – Cedric Jan 27 '16 at 01:17
  • @Cedric yes you're right. i've removed my answer. – Jörn Jan 27 '16 at 01:20

2 Answers2

5

Having:

<span class="foo bar me"></span>

Has both me and foo classes:

$('span').is(".foo.me");

Using an array of classes you could use .join() to get the needed string selector ".foo.me" like:

var classes = ['me', 'foo'];
$('span').is("."+ classes.join("."));

or simpler:

var classes = ['.me', '.foo']; // (Notice the `.`)
$('span').is(classes.join(""));

To recap, .hasClass('me', 'foo') is basically wrong cause .hasClass() accepts only one argument

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • hi roko, the `console.log( $('span').is(classes.join("")));` do it but the class must be in chronological order, the array in my example isn't and will not work in my case because the array is dynamic will not be always in chronological order, I don't know why but `console.log($('body span').hasClass('bar', 'me'));` works – Cedric Jan 27 '16 at 01:22
  • @Cedric works cause `"bar"` is the only considered class and your element logically HAS that class. – Roko C. Buljan Jan 27 '16 at 01:23
  • but in my case I need `bar` and `me` to be in that class in which if `me` is not present it should throw `false` – Cedric Jan 27 '16 at 01:35
  • @Cedric I gave you 2 possible variants , what's not clear? see this example: http://jsbin.com/xalotac/1/edit?html,js,console,output You're clearly interested in the `&&` variant (AKA: "must have all specified classes"). Seems you're sleep deprived :D – Roko C. Buljan Jan 27 '16 at 01:37
  • Hi roko, seems I am just confused on your answer, the `console.log( $('span').is("."+classes.join(".")) );` works not this one `console.log( $('span').is(classes.join("")) );` I only tries the second one which is the simpler one, didnt check the first, which is the one that works in my case. thanks Roko! – Cedric Jan 27 '16 at 01:48
  • 1
    @Cedric you're welcome! (Read carefully, I've stated in the second example that it uses `['.me', '.foo']; // (Notice the `.`)` ) – Roko C. Buljan Jan 27 '16 at 01:49
0

jQuery's .hasClass() only accepts a single class, as a string (according to the docs).

To test for multiple, dynamic classes you can use .is():

var class1 = 'me';
var class2 = 'foo';

arrayNames = [class1, class2];

console.log($('body span').is(arrayNames.map(function(className) {return '.'+ className;}).join(',')));

Here's a JSFiddle.

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184