If statement that detects a class among multiple ones

Question

I have this simple if statement:

if(comments.className === "hide")

However the class of the element I am trying to "select" is class="hide slide" and this doesn't seem to work if this is the case. How would I write this so that he "finds" the hide among the 2 classes?

Is jQuery available? This type of thing is trivial with the big jQ. — isherwood, Mar 04 '13 at 17:40

Ben McCormick · Answer 1 · 2013-03-04T18:24:01.130

3

You can use comments.className.split(/\s+/); and then iterate over the options to find what you want

var classes = comments.className.split(/\s+/);
var classexists = false;
for(i=0; i<classes.length; i++){
    if(classes[i] === "specifiedclass"){
        classexists = true;
        break;
    }
if(classexists){...

Doing this as a function

function hasClass(desiredClass,el){
  var classes = el.className.split(/\s+/);
    var classexists = false;
    for(i=0; i<classes.length; i++){
        if(classes[i] === desiredClass){
            classexists = true;
            break;
        }
    }
   return classexists;
}
if(hasClass("specifiedclass",comments){...

(thanks to the system for the suggestion)

edited Mar 04 '13 at 18:24

answered Mar 04 '13 at 17:40

Ben McCormick

25,260
12
52
71

1

+1, Would be nice to make it reusable in a function that does a `return true` if the class is found, otherwise a `return false` at the end. – the system Mar 04 '13 at 17:59
good point, edit coming. – Ben McCormick Mar 04 '13 at 18:14

kennebec · Answer 2 · 2013-03-04T18:09:11.170

2

dogberts solution(removed) would be better if he tests for 'hide' with a possible space or start or end markers-

if(/(^|\s)hide(\s|$)/.test(comments.className))

edited Mar 04 '13 at 18:09

answered Mar 04 '13 at 17:55

kennebec

102,654
32
106
127

1

What about non-space delimiters? (Tab, line break...) Chrome, at least, does *not* normalize those to spaces: http://jsbin.com/ihaxek/1 (I was kind of hoping it -- and the others -- would, but it's probably best that they don't.) – T.J. Crowder Mar 04 '13 at 18:05
@TJ- I had to check, you are correct. (I never broke up a classname with newlines before). Edited my answer, thanks. – kennebec Mar 04 '13 at 18:08
@ kennebec: *"I had to check"* Yeah, me too. :-) – T.J. Crowder Mar 04 '13 at 18:10
If, as in this case, one *knows* that the class name contains no word-boundary characters (notably "-"), then shouldn't `\b` work? (As in `/\bhide\b/` ?) – Pointy Mar 04 '13 at 18:16
@Pointy- you also have to know that there are no possible classnames with word boundaries, or you'll match dont-hide and hide-never as well as hide.Better safe... – kennebec Mar 04 '13 at 18:32

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

Use split and loop over it (or use kennebec and Dogbert's elegant Regex solution, it will also work for any edge cases):

var parts = comments.className.split(" ");
var hasHide = false;
for (var i=0;i<parts.length;i++){
   if (parts[i] == "hide"){
      hasHide = true;
   }
}
if (hasHide){
   //...
}

Or use jQuery:

   if ($(comments).hasClass("hide")){
      //...
   }

edited May 23 '17 at 10:25

Community

1
1

answered Mar 04 '13 at 17:41

Matt Zeunert

16,075
6
52
78

2

Your split will work in most cases, but it'll be safer with a regex since the class separator can be one of many different types of whitespace, including tabs or line breaks. – the system Mar 04 '13 at 17:55
And Chrome, at least, does *not* convert them to spaces: http://jsbin.com/ihaxek/1 – T.J. Crowder Mar 04 '13 at 18:08
@thesystem You're two are right, it's more reliable to use regex. Still, normally you'll be just fine checking for spaces, especially if you generate the Html code yourself. – Matt Zeunert Mar 04 '13 at 18:47
@Matt: Yeah, I think it would be rare for someone to use something other than a space character. But could be a tough bug to track down if a tab makes it in there by accident. – the system Mar 04 '13 at 19:00

If statement that detects a class among multiple ones

3 Answers3

Doing this as a function