.addClass() JQ Home  <<  A & P  <<  .addClass()

Adding classes to CSS.

Description

The .addClass() method is used to add the specified class(es) to each element of the matched set.

  • The method appends to any existing CSS classes, it does NOT replace them.
  • Often used in tandem with the .removeClass() method to switch class styling.

The .addClass(classNames) method was added in jQuery 3.3.

Syntax

Signature Description
.addClass(className)Add one or more classes to be added to each element within the matched set.
.addClass(classNames)An array of classes to be added to each element within the matched set.
.addClass( function(index, currentClass) )A function returning one or more classes to be added to each element within the matched set.

Parameters

Parameter Description Type
classNameOne or more space-separated class names.String
classNamesAn array of class names.Array
function(index, currentClass)A function to execute on each element within the matched set.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The existing class(es) pertaining to the current element are also passed.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
 Function

Return

A jQuery object.

.addClass( className ) ExamplesA & P  <<  Top

Add one or more classes to each element within the matched set.

In the example below when we press the left button we select all odd 'td' elements within the table and add the class 'turnOrange' detailed below. Please note these changes are only visible if this button is pressed first. CSS always applies styles top-down so even though we may append 'turnOrange' to 'turnOlive', if both are present 'turnOlive' will be used as it is the last style in the CSS styles list.

When we press the right button we select all odd 'td' elements within the table, remove the class 'turnOrange' and add the class 'turnOlive' detailed below.


.turnOrange {
  background-color: orange;
}
.turnOlive {
  background-color: olive;
}
Table For Testing The .addClass( className ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('#btn1').on('click', function() {
    $('.testtable td:odd').addClass('turnOrange'); // only works if clicked first
  });
  $('#btn2').on('click', function() {
    $('.testtable td:odd').removeClass('turnOrange') 
                          .addClass('turnOlive'); 
  });
});

Press the button below to action the above code:

             

.addClass( classNames ) ExamplesA & P  <<  Top

Add an array of classes to each element within the matched set.

In the example below when we press the left button we select all odd 'td' elements within the table and add the classes 'turnPurple' and 'turnColorWhite' detailed below. Please note these changes are only visible if this button is pressed first. CSS always applies styles top-down so even though we may append 'turnPurple' to 'turnOlive', if both are present 'turnOlive' will be used as it is the last style in the CSS styles list.

When we press the right button we select all odd 'td' elements within the table, remove the classes 'turnPurple' and 'turnColorWhite' and add the classse 'turnOlive' and 'turnColorBlack' detailed below.


.turnPurple {
  background-color: purple;
}
.turnColorWhite {
  color:white;
}
.turnOlive {
  background-color: olive;
}
.turnColorBlack {
  color:black;
}
Table For Testing The .addClass( classNames ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
 $('#btn16').on('click', function() {
    $('.testtable3 td:odd').addClass(['turnPurple', 'turnColorWhite']) // only works if clicked first
  });
  $('#btn17').on('click', function() {
    $('.testtable3 td:odd').removeClass(['turnPurple', 'turnColorWhite']) 
                           .addClass(['turnOlive', 'turnColorBlack']); 
  });
});

Press the button below to action the above code:

             

.addClass( function(index, currentClass) ) Example A & P  <<  Top

A function returning one or more classes to be added to each element within the matched set.

In the example below when we press the button we select all 'td' elements within the table with an id of 'testtable2'. We then iterate over the collection changing any class that is 'turnYellow' to 'turnOrange'. We remove the previous class used and return the changed class from the function. On subsequent clicks we go through a cycle of classes and colours ad infinitum.


.turnAqua {
  background-color: aqua;
}
.turnOrange {
  background-color: orange;
}
.turnOlive {
  background-color: olive;
}
.turnYellow {
  background-color: yellow;
}
Table For Testing The .addClass( function(index, currentClass) ) Signature
Table Row 1, Table Data 1  (class of turnYellow) Table Row 1, Table Data 2
Table Row 2, Table Data 1  (class of turnYellow) Table Row 2, Table Data 2  (class of turnYellow)
Table Row 3, Table Data 1  (class of turnYellow) Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2  (class of turnYellow) 


$(function(){
  $('#btn3').on('click', function() {
    $('.testtable2 td').addClass( function( index, currentClass ) {
      var newClass;
      if ( currentClass === 'turnYellow' ) {
    	$(this).removeClass('turnYellow');
        newClass = 'turnOrange';
      } else if ( currentClass === 'turnOrange' ) {
    	$(this).removeClass('turnOrange');
        newClass = 'turnAqua';
      } else if ( currentClass === 'turnAqua' ) {
    	$(this).removeClass('turnAqua');
        newClass = 'turnYellow';
      } else {
        newClass = 'turnYellow';
      }
      return newClass;
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 8 - Working With CSS Classes