add multiple classes jquery – How to Add and Remove multiple classes in jQuery ?

add multiple classes jquery – You can separate multiple classes with the space: like as $(“p”).addClass(“class1 class2 class3”); Jquery addclass() is used to add one or multiple classes dynamically to the selected element.

add multiple classes jquery

The jQuery addClass() method adds one or more classes to the selected elements.

Add and remove multiple classes in jQuery

$("p").addClass("myClass yourClass");

How to Add and Remove multiple classes in jQuery ?


<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
		</script>

<style>
			.color {<br />
				color: red;<br />
			}<br />
			.fontWeight {<br />
				font-weight: bold;<br />
			}<br />
		</style>

 

 
<h2 style="color: red;">Pakainfo</h2>
<button>
click here
</button>

<script>
			$('#Pakainfo_UP').text("Click on button to add multiple"
				+ " classes to this element");
			
			function Pakainfo_Data() {
				$("#Pakainfo_UP").addClass("color fontWeight");
				$('#Pakainfo_DOWN').text("color and fontWeight,"
						+ " Both classes added");
			}
		</script>

Don’t Miss : Dynamically AddClass CSS Click Using JQuery

Also Read This πŸ‘‰   jquery multiselect dropdown checkbox with search

Add multiple classes in jQuery

$(document).ready(function(){
$('.elementclass').addClass('first_cls');
//OR
$('.elementclass').addClass('first_cls').addClass('second_cls_name');

}

separated by a space

$(document).ready(function(){

$( "div" ).addClass( "firstCls SecondCls" );

$( "div" ).addClass( "firstCls SecondCls ThirdCls FourthCls" );

})

using function in addClass() method

<script>
$( "div" ).addClass(function( index, class ) {
  var addedClass;
 
  if ( class === "pink" ) {
    addedClass = "green";
    $( "p" ).text( "There is one green div" );
  }
 
  return addedClass;
});
</script>

Free Live Chat for Any Issue

Don’t Miss : JQuery Multiple Class Selectors Match

I hope you get an idea about add multiple classes jquery.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.