.addClass()S2C Home « Attributes & Properties « .addClass()

• <<    .val()
• .hasClass()     >>

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

Parameters

Return

A jQuery object.

.addClass( className ) ExamplesTop

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 we are using. If you are unsure on how CSS specifity works or need a refresher on the subject take a look in the CSS section at Specifity (the cascade).

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;
}

$(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'); 
  });
});

.addClass( className ) ExamplesTop

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;
}

$(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']); 
  });
});

.addClass( function(index, currentClass) ) ExampleTop

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;
}

$(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;
    });
  });
});

• <<    .val()
• .hasClass()     >>