Add CSS Class Using jQuery

The addClass function provided by jQuery can be used to add the single class or multiple classes as shown below.

// Add single class
jQuery( <selector> ).addClass( <class name> );

// Add multiple classes
jQuery( <selector> ).addClass( <class1 class2 class3> );

A single class can be added by passing the class name as a function argument. We can also add multiple classes by passing the class names separated by space.

The HTML used for the examples is as shown below.

<div class="wrap-items">
	<div class="wrap-item">
		<div id="item-1" class="item has-banner">
			<!-- item element -->
		</div>
		<div id="item-2" class="item">
			<!-- item element -->
		</div>
	</div>
</div>

The below-mentioned examples show how we can add either single or multiple classes.

// Add the class has-price to the element having id item-1
// Note that we do not need to use dot(.) for the argument passed to addClass function
jQuery( '#item-1' ).addClass( 'has-price' );

// Remove and add class
jQuery( '#item-1' ).removeClass( 'has-banner' ).addClass( 'has-gallery' );

// Add the classes has-price and has-image
jQuery( '#item-1' ).addClass( 'has-price has-image' );

The more advanced usage is by passing a function as an argument to the addClass method as shown below.

jQuery( ".item" ).addClass( function( idx ) {
	return "item" + idx;
});