Tag Archives: hasclass

jQuery: How to Check if an Element has Class ‘X’ or ‘Y’ Programming 15 MAR 2015

If you find yourself needing to check whether or not a particular HTML element has a specific class currently assigned to it, you’ll be pleased to know that the awesome jQuery javascript library has you covered with their ever so useful .hasClass function.

This function determines whether any of the matched elements are assigned the given class, returning true if the searched for class is in fact assigned to an element – regardless of whether or not that element has more than one class assigned to it. (Remember, HTML allows elements may have more than one class assigned to them – separated by a space in HTML notation.)

An example:

<div id="mydiv" class="foo bar"></div>
$( "#mydiv" ).hasClass( "foo" ); //returns true
$( "#mydiv" ).hasClass( "quu" ); //returns false

In other words, no need for splitting an element’s class attribute and then looping through the strings just to see if a particular class exists any more!

a lady with class - audrey hepburn

jquery logo

Related Link: https://api.jquery.com/hasclass/

jQuery: Iterate Through an Element’s Classes Programming 28 DEC 2010

More often than not, your HTML elements will have more than one class assigned to them. Now while it is easy to check if an element belongs to a certain class with jQuery’s built in hasClass function, you’ll be pleased to know it is just as easy to iterate through all of an element’s classes with some basic loop work.

How basic you ask? Well actually a single simple for loop really.

Taking into account that a class is nothing more than an attribute, we can retrieve an element’s assigned classed with a simple

$('#myelement').attr('class');

The result is a single string value containing the classes currently attached to the element. To iterate through the classes, we simply break up the returned string with the split function:

var classList = $('#myelement').attr('class').split(/\s+/);

Now that we have an usable array, we simply loop through it in any accepted manner, leaving us with code that looks like this:

var classList = $(this).attr('class').split(/\s+/);
               for (i = 0; i < classList.length; i++) {
                   if(classList[i].length > 0){
                       alert(classList[i]);
                   }
               }

Nifty.

jQuery: Add and Remove Element Classes on the Fly CodeUnit 22 JAN 2010

Quite often you achieve altering a specific HTML element’s look and feel by assigning it to a particular class, that class already possessing some customised CSS style rules in the document’s main stylesheet.

There are of course times when you actually want to achieve this visual style change on the fly, say for instance when you hover over a table row (change it’s background color for example) and the good news for you is that jQuery makes this particular ability of adding or removing classes to any element on the fly an absolute doddle.

So how is this achieved?

Well jQuery comes bundled with the handy hasClass, addClass and removeClass functions, which all do pretty much as their names suggest. The trick is to attach them to a particular selector (whichever element whose class membership you want to alter), as well as specify the name of the class that they will need to act upon.

if ( $('body').hasClass('blue') ) {
    $('body').removeClass('blue');
} else {
    $('body').addClass('blue');
}

Looking at the code above, you’ll see we’re essentially toggling the body element’s class structure, adding “blue” to it should it not already belong to that class. If however body already has the blue class instated, we then rather remove it.

It really is that simple and immediately thrusts a lot of event-driven visual manipulation power into your hands, so go forth and alter wisely my sons! :P