jQuery check if element has a class

Question

I am trying to check to see if an HTML element has a class and if so, then run a function with jQuery. My code only works if an element doesn't have multiple classes. I believe I need to use the .hasClass() method, but I couldn't figure it out.

var pageClass = $("body").attr('class');
switch (pageClass) {
  case ("page1"):
    $('h1').html('heading1');
    break;
  case ("page2"):
     $('h1').html('heading2');
    break;
  default:
    $('h1').html('default');
}

fiddle: https://jsfiddle.net/9o70dbzz/2/

what would you do if the body had all 3 classes? would you only want the first, or last, or append all together? — Jeff Puckett
– Jeff Puckett, Commented Apr 19, 2016 at 21:34
api.jquery.com/hasClass <--- The documentation is right there, free of charge, ready for you to read it. — user400654
– user400654, Commented Apr 19, 2016 at 21:45

Sonny · Accepted Answer · 2016-04-19 21:35:50Z

10

Use the .hasClass() function.

if($("body").hasClass("page1")){
  $("h1").html("heading1");
}
else if($("body").hasClass("page2"){
  $("h1").html("heading2");
}
else {
  $("h1").html("default");
}

answered Apr 19, 2016 at 21:35

Sonny

3032 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dejavu Over a year ago

is the only way is to use if else statement?

Sonny Over a year ago

Using if/else with the "hasClass" function is the easiest way. Using a switch statement would be too convoluted in this scenario.

Clomp Over a year ago

What Sonny says makes sense, as the code examples use multiple classes. The .hasClass() method is similar to if (className.indexOf('page1') > -1) { ... }. Neither one of those works well in a switch. However, you could use unique id attributes with a switch. Like: <body id="page1"> or <body id="page2"> & then use switch($("body").attr("id")) {...}. The reason is that only 1 value is passed into the switch with the id, rather than multiple values with the classes. So it's good to remember that switches work with single value keys & if/else statements work with multiple input keys.

GG. · Accepted Answer · 2016-04-19 22:14:21Z

4

This can be solved with selectors:

$('h1').html('default');
$('body.page1 h1').html('heading1');
$('body.page2 h1').html('heading2');

edited Apr 19, 2016 at 22:14

answered Apr 19, 2016 at 21:37

GG.

22k14 gold badges93 silver badges133 bronze badges

Comments

Nevermind · Accepted Answer · 2016-04-19 21:42:12Z

1

I would do it in such way....

$(document).ready(function() {
var element = $("body");

var classesCollection = {
    'page1': 'heading1',
    'page2': 'heading2'
};

for (var propertyName in classesCollection) {
    var propertyValue = classesCollection[propertyName];
    if (element.hasClass(propertyName)) element.html(propertyValue);
    else element.html('default');
}

});

https://jsfiddle.net/9o70dbzz/4/

answered Apr 19, 2016 at 21:42

Nevermind

214 bronze badges

Collectives™ on Stack Overflow

jQuery check if element has a class

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related