Updated April 6, 2023
Introduction to jQuery replace class.
In jQuery, replace class is one of the built-in and rarely used functions, and this repalceClass() function is defined as to replace one class properties with another class property which is specified or declared within this function as parameters where these classes are already defined and properties are declared in the head tag of the code. In general, we can say the replaceClass() function in jQuery is less used as it does nothing instead, there are three more other classes such as hasClass(), removeClass(), and addClass() therefore, the replace class is defined for replacing one class properties with another class properties.
Syntax:
$(selector tag).replaceClass(first_class_name, second_class_name);In the given syntax of the repalceClass() function in jQuery, which is applied on matched or specified selector tag or element, this replaceClass() function consists of two-parameters parameters consist of class names.
Parameters:
- First_class_name: this parameter is used to specify the class name that needs to be replaced with other class properties, which is specified in another parameter as second_class_name.
- Second_class _name: this parameter is used to specify the class name that its properties are replaced with the class which is specified in the parameter first_class_name.
This function replaceClass() should return that class’s properties, which is said to be replaced with the specified class name. But in jQuery, this does not display any changes and hence in jQuery, to display or look for changes, we need to use removeClass(), addClass() functions in jQuery. So let us also see the syntax of these functions.
- removeClass()
Syntax:
$(Selector).removeClass(Class_Name);In the above syntax, it can be applied to any element, and it uses only one parameter in which we have to specify the class name of which we want to remove.
- addClass()
Syntax:
$(Selector).addClass(Class_Name);In the above syntax, it can be applied to any element, and it uses a parameter in which we have to pass the class name which we need to add and to add more than one class, we can just specify the class names separating with commas.
How replaceClass() function works in jQuery with examples?
In jQuery, to replace one class properties with another, there is a function called replaceClass() through which it takes in two different class names the first class name is specified as a class which should be replaced with the second class name that is specified as the second parameter in the function, where it according to this function it should display the properties of the class for that element whose properties are replaced with the properties of another class. But in jQuery, when we run any code that uses the replaceClass() function does nothing, which means there is o functionality seen in the output when this function is used. Therefore instead of this function, there are two other functions used removeClass() and addClass(), for replacing, which will remove the properties and add the class properties accordingly.
Now let us see an example for demonstrating the replaceClass() function in jQuery in which we can see the output, which displays no change when we use this function.
Example:
<html lang="en">
<head>
<meta charset="utf-8">
<title> Demonstration of replaceClass() function in jQuery. </title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.firstclass {
color: red;
}
.secondclass {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p class="firstclass"> Educba</p>
<p class="secondclass"> Delhi </p>
<script>
$(document).ready(function() {
$( "p" ).replaceClass( "firstclass", "secondclass");
});
</script>
</body>
</html>Output:
In this above code, we can see we have made the document ready using the ready() function within the script tag in the body tag, and the classes properties are defined in the head tag within the style tag. The class name always starts with the dot operator (.) followed by the class name, and the properties are declared within the braces. These classes are referred to in the body tag within the element declaration with the class as an option and the class name’s value. Therefore then we are using the replaceClass() function on the element tag “p”, which is a paragraph tag and the text to display in this is “Educba” for the class name “firstclass” and “Delhi” for “secondclass”. So here, the replaceClass function indicates that the class properties of “firstclass” should be replaced by “secondclass”, which means the text color in the “firstclass” is red, which must be replaced by blue, but this function does not display any changes. The output is as shown in the above screenshot.
Now let us see another example where we will see a demonstration of removeClass() and addClass() function, which is used whenever to remove the properties of one class and add the other properties of other class wherein jQuery for this they used replaceClass() function which showed no functionality when the output was displayed.
Example:
<!DOCTYPE html>
<html>
<head>
<title> Demonstration of removeClass() and addClass() instead of replaceClass() in jQuery </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$( "p" ).removeClass( "classone" ).addClass( "classtwo" );
});
</script>
<style>
.classone {
color: red;
}
.classtwo {
color: yellow;
}
</style>
</head>
<body>
<p class ="classone"> Educba </p>
<p class ="classtwo"> Pune </p>
</body>
</html>Output:
In this above code, which is similar to the previous example, but here the same replacement of one class with another is done using removeClass(), and addClass() functions in jQuery as replaceClass() function has no proper functionalities to display. In this, the only difference is instead of the replaceClass() function; we are using removeClass() with the class which we want to replace with another class and then followed by addClass(), which has the class name as a parameter that needs to be displayed after replacing. Hence here, the text color of “classone”, which was declared red, is now replaced with the text color of “classtwo”, which is yellow. The output is as shown in the above screenshot.
Conclusion – jQuery replace class
In this article, we conclude that in jQuery to replace one class with another class, there is a function replaceClass(), but as it does not show any difference in the output, the jQuery provides removeClass() function, which removes the property of the class that is specified and addClass() function which will add or append the properties of the class that is specified which will not replace the existing class.
Recommended Articles
This is a guide to jQuery replace class. Here we discuss How replaceClass() function works in jQuery along with the examples and outputs. You may also have a look at the following articles to learn more –
