Function to check if element has any of these classes with native JS

Question

<div id="test" class="a1 a2 a5"></div>

var element = document.getElementById("test") 
if (hasAnyOfTheseClasses(element, ["a1", "a6"])) { 
   //...
}

Looking for a simple, lightweight function to check if a function has any of the listed classes without jQuery or another library.

Such function would be easy to implement, but there should be a canonical, fastest and simplest answer people can just copy-paste.

This seems vampire-ish, but I'm asking this so googlers won't have to write it themselves.

Not a duplicate - the linked question checks for one class, this question asks for checking any of the classes.

A jQuery version exists here.

Who doesn't want this to be able to copy-paste this sort of code? — noɥʇʎԀʎzɐɹƆ, Sep 27 '16 at 01:00
Shouldn't be too hard for someone with basic skills. Tried anything yourself? — Alexander O'Mara, Sep 27 '16 at 01:00
@AlexanderO'Mara Yes. It works. I'm looking for a canonical answer so googlers won't have to go through that process again. (my impl probably isn't good for performance or elegant) — noɥʇʎԀʎzɐɹƆ, Sep 27 '16 at 01:01
If you're looking to post a canonical question, post your solution as an answer. Don't hide behind it as an excuse to get people to write code for you. — 4castle, Sep 27 '16 at 01:02
Not sure if adding a loop needs its own Q&A. Basically a duplicate of [Test if an element contains a class?](http://stackoverflow.com/q/5898656/218196). The short version would be `['foo', 'bar'].some(cls => element.classList.contains(cls))` — Felix Kling, Sep 27 '16 at 01:11
There's no such thing as `selectElementById`. It's `getElementById`. — Barmar, Sep 27 '16 at 01:14
This has already been answered, possible duplicate. http://stackoverflow.com/a/5898748/4812515 — alphapilgrim, Sep 27 '16 at 01:19
@alphapilgrim Dude, did you read the question before VTC? C'mon, just because -3 doesn't mean dupe. — noɥʇʎԀʎzɐɹƆ, Sep 27 '16 at 01:22
*"the linked question checks for one class, this question asks for checking any of the classes."* Can we assume that developers know how to repeat something multiple times? — Felix Kling, Sep 27 '16 at 01:23
@noɥʇʎPʎzɐɹC Your answer looks alot like the answer from that question. Just with a for loop. Just saying. — alphapilgrim, Sep 27 '16 at 01:24
@FelixKling Different canonical answers though. `.classList.contains()` is much better than the tricky method described there. Also google hits. — noɥʇʎԀʎzɐɹƆ, Sep 27 '16 at 01:24
*"`.classList.contains()` is much better than the tricky method described there."* The answer says *"Alternatively, if you work with a browser which supports `element.classList`, you can use its `.contains` method: ..."* Also if you look at the end of the answer, you can see that it actually applies the test in a loop ;) Just saying :) — Felix Kling, Sep 27 '16 at 01:25
@FelixKling Hard to find by google. Overlapping answer ≠ no need for new question. — noɥʇʎԀʎzɐɹƆ, Sep 27 '16 at 01:26
*"Hard to find by google."* That's what duplicate questions are for. The dupes are sign posts to the canonical Q&A. — Felix Kling, Sep 27 '16 at 01:27
Tiny? It's 25% of the answer! But whatever, I don't care. Just make sure to link to https://stackoverflow.com/questions/5898656/test-if-an-element-contains-a-class/5898748 in your question. — Felix Kling, Sep 27 '16 at 01:29

score 1 · Accepted Answer · answered Sep 27 '16 at 01:20

Here's a functional implementation using Array.some and Element.classList.contains.

function hasAnyClass(element, classes) {
  return classes.some(function(c) {
    return element.classList.contains(c);
  });
}

var div = document.getElementById("test");
console.log(hasAnyClass(div, ["hi", "xyz"]));
console.log(hasAnyClass(div, ["xyz", "there"]));
console.log(hasAnyClass(div, ["xyz", "xyz"]));

<div id="test" class="hi there"></div>

Note that these functions are not supported on older versions of IE, and will require a shim/polyfill.

noɥʇʎԀʎzɐɹƆ · Answer 2 · 2016-09-27T01:18:10.520

0

Here's my implementation:

function hasAnyOfTheseClasses(element, classes) {
    for (var i = 0; i < classes.length; i++) {
        if ((' ' + element.className + ' ').indexOf(' ' + classes[i] + ' ') > -1) {
            return true;
        }
    }
    return false;
}

It's not elegant or fast. Works though. Feel free to edit to improve.

edited Sep 27 '16 at 01:18

answered Sep 27 '16 at 01:06

noɥʇʎԀʎzɐɹƆ

9,967
2
50
67

score 0 · Answer 3 · answered Sep 27 '16 at 01:15

0

You could use a regex, not sure that it's purely better but at least more flexible since your current test relies too much on spaces being entered correctly.

function hasAnyOfTheseClasses(element, classes) {
    var className = element.className;
    for (var i = 0; i < classes.length; i++) {
        var exp = new RegExp('\b'+classes[i] + '\b');
      if(exp.test(className)) return true;
    }
    return false;
}

answered Sep 27 '16 at 01:15

Paul

35,689
11
93
122

*"relies too much on spaces being entered correctly"* I don't think so. How could that be an issue? That's also the implementation that jQuery uses btw. – Felix Kling Sep 27 '16 at 01:19

score 0 · Answer 4 · answered Sep 27 '16 at 01:16

0

just create a loop that check if each value in your array is a class in your passed element

function hasAnyOfTheseClasses(elem, tofind) {
    classes = elem.className.split(' ');
    for(var x in tofind) {
        var className = tofind[x];
        if (classes.indexOf(className) == -1){
            return false;
        }
    }
    return true;
}

answered Sep 27 '16 at 01:16

Beginner

4,118
3
17
26

1

misusage of `for (... in ...)` – noɥʇʎԀʎzɐɹƆ Sep 27 '16 at 01:17
mine does too. And this one has a bug. – noɥʇʎԀʎzɐɹƆ Sep 27 '16 at 01:25

score 0 · Answer 5 · answered Sep 27 '16 at 01:18

0

Use the .classList property to get the list of classes of an element. Then you can use the .contains() method to test each of the classes.

function hasAnyOfTheseClass(element, classes) {
    var classList = element.classList;
    return classes.some(function(class) {
        return classList.contains(class);
    });
}

answered Sep 27 '16 at 01:18

Barmar

741,623
53
500
612

Duped by Felix's answer. – noɥʇʎԀʎzɐɹƆ Sep 27 '16 at 01:20
Oh dear, this answer is popular 3 times over – 4castle Sep 27 '16 at 01:21

nbarbosa · Answer 6 · 2016-09-27T02:27:59.287

0

How about using Array.prototype.some() and Array.prototype.indexOf():

function hasAnyClass(el, classes) {
  var elClasses = el.className.split(' ');
  return classes.some(c => elClasses.indexOf(c) >= 0)
}

edited Sep 27 '16 at 02:27

answered Sep 27 '16 at 02:19

nbarbosa

1,652
1
12
10

Function to check if element has any of these classes with native JS

6 Answers6