Switch Statement and jQuery hasClass function

Question

I am trying to use a switch statement to check if the current page has a specific body class. This is kind of what I am looking for:

var bodyClass = $('body').hasClass('className')

 switch(bodyClass) {
    case 'homepage':
        // console.log("This is the homepage");
        break;
    case 'residential-page':
        // console.log("This is the residential page");
        break;
     default:
     // console.log("default code block ran");
 }

I do understand that the jQuery hasClass function returns true of false and is used like $('body').hasClass('someClassName') and this will return true or false. Also, my body typically has about 7-10 different class names for a given page.

The `switch` statement is used to compare two values. Since `class` can contain multiple values, you probably shouldn't be using switch. You'll probably need to [grab all the classes](http://stackoverflow.com/questions/2787291/use-jquery-to-get-a-list-of-classes) and then use the `if` statement. — Erik Philips, May 26 '16 at 18:22
`$.hasClass` is used to check if a specific element has a specific class. — IMTheNachoMan, May 26 '16 at 19:44
I'm sorry, I meant to say that there is going to be places where the code looks like this: `Switch() {} case '': case '': case '': case '': case '': case '': case '':` I wanted to avoid the following type of if statements: `if (body.hasClass('abc') || body.hasClass('abc') || body.hasClass('abc') || body.hasClass('abc') || body.hasClass('abc') || body.hasClass('abc')) { // some code }` (Sorry: It appears the above examples are going to be a little tough to read without line breaks). — SuperTony, May 26 '16 at 20:36

William B · Accepted Answer · 2016-05-26T18:24:01.557

6

This is not the use case for a switch in my opinion, but a simple set of branches

var body = $('body');

if(body.hasClass('abc')) {
}
else if(body.hasClass('def')) {
}
else {
  /* default case */
}

/* etc */

edited May 26 '16 at 18:24

answered May 26 '16 at 18:22

William B

1,411
8
10

As I side note, I recommend to other to prefix variables that represent jQuery objects with $ (e.g. `var $body = $('body');`). Just a personal prefernce. – Erik Philips May 26 '16 at 18:23
Interesting convention Erik. But it's giving me PHP flashbacks! – William B May 26 '16 at 18:27

score 1 · Answer 2 · answered May 26 '16 at 18:36

I agree with the other answer that you're better suited to just use if, else if statements here, but an alternative would be to rip the classes off the body tag and check them against your strings:

var bodyClasses = ($('body').attr('class') || '').split(' ');

for (var i = 0, len = bodyClasses.length; i < len; i++) {
 switch(bodyClasses[i]) {
    case 'homepage':
        // console.log("This is the homepage");
        break;
    case 'residential-page':
        // console.log("This is the residential page");
        break;
     default:
     // console.log("default code block ran");
 }
}

score 1 · Answer 3 · answered Oct 02 '19 at 18:29

I know this is an old thread, but it may help someone else.

If you are able to ensure the classes for the element are declared in a specific order, you could ensure the class you are checking for is first / last in the list, and use something similar to this:

var bodyClass = $('body').attr('class');
var firstClass = bodyClass.slice(0, bodyClass.indexOf(' '));

switch(firstClass) {
    case 'homepage':
        // Some code here
        break;
    case 'residential-page':
        // Other code here
        break;
    default:
        // More code here
}

Switch Statement and jQuery hasClass function

3 Answers3