Using Classes in jQuery

jQuery makes it easy to add a class to a selected element, or elements. Likewise, it makes it easy to remove classes from the element. This allows you easily update your page layout dynamically.

You may want to use classes instead of Directly Applying your CSS Rules because it will make updating the design and layout much easier, just as updating an external style sheet makes it easier to update a website’s design.

Checking for Applied Classes

jQuery lets you see what classes are assigned to a selected element. However, there is a catch. It returns them all as a single string. So you could have:

And you use the following jQuery:

var classString = $('#content').attr('class');

You will get back (stored in your string) top content nosiderbar. You would have to parse out this string to find your class or not. This would probably be a bit more challenging than it should be.

Luckily the developers of jQuery are fairly smart. They added a .hasClass() function to let us know what is available. This returns a boolean true/false result. So using the HTML information before:

var result = $('#content').hasClass('content');
// result is true

var result2 = $('#content').hasClass('details');
// result2 is false

 

Adding a Class

Adding a class, or two can be easily done with jQuery. It is helpful, if you are wanting to update a site, to already have a class defined in a style sheet. You cannot (to my knowledge) define classes at run time with jQuery – only add, remove, and check them.

You will need to have a standard jQuery selector, then use the addClass() function. You will just need to pass in the class name that you are adding. For example:

$('#content').addClass('highlight'); // addes "highlight" to the main div
$('#content p').addClass('highlight'); // addes "highlight" to the paragraphs 
   // main under the div #content only

Removing a Class

Removing classes are just as easy. You use the removeClass() function, and pass to that function the class that you are removing. Once the class is removed, the element will update by adjusting the look to remove any styles associated with that class.

$('content').removeClass('top');

 

Toggling a Class

To toggle something means switch it’s state. A toggle switch can switch between up and down or left and right. To toggle a CSS class, would mean that you would need to add it if the element doesn’t have it, and remove it, if it doesn’t have it anymore.

Using the hasClass(), addClass(), and removeClass() functions, we can create our own toggle ability. It would need a simple decision statement like below.

if($('#content').hasClass('highlight')) {
  $('#content').removeClass('highlight');
} else {
  $('#content').addClass('highlight');
}

However, as you can image that takes a bit of coding. We could of course put this into a function, however jQuery beat us to it. They are constantly adding new features, and one that they added a few versions back was a toggleClass(). Much like what you see, it goes and checks to see if the class is applied to the element(s). If the class is on the element, it removes it, otherwise it adds it.

The above example can be simplified down to something like:

$('#content').toggleClass('highlight');

 

Using Classes in jQuery was originally found on Access 2 Learn