jQuery replaceClass
jQuery Tutorial » jQuery replaceClass
What is replaceClass in jQuery?
The repalceClass () function is defined to replace a class property with another class property that is specified or declared in this function as parameters in which those classes are already defined and the properties are declared in the header tag of the code.
Syntax:
Parameters:
firstclassName: is used to specify the class name that needs to be replaced.
secondclassName: is used to specify the class name that its properties are replaced with the class in the parameter firstclassname.
- removeClass()
Syntax:
- addClass()
Syntax:
replaceClass() function - examples?
Example for demonstrating the replaceClass () function in jQuery where we can see the result, which shows no change when we use this function.
<head>
<meta charset="utf-8">
<title> Demonstration of replaceClass() function in jQuery. </title>
<style>
p {
margin: 6px;
font-size: 18px;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
}
.firstclass {
color: #F00;
}
.secondclass {
color: #00F;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p class="firstclass"> AgerNic.com</p>
<p class="secondclass"> AgerNic.com tutorial</p>
<script>
$(document).ready(function() {
$( "p" ).replaceClass( "firstclass", "secondclass");
});
</script>
</body>
</html>
Related subjects:
jQuery slideUp
jQuery fadeout
Scrool
jQuery click
Tags: jquery replace text, replace element, find and replace html, string replace all, replace text in div, replace innerhtml, innerhtml, change div content dynamically, html in div, text in string, class, character in string,
What is replace in jQuery?
How can I replace part of a string in jQuery?
How do you replace an element with another in jQuery?
What is $() in jQuery?
removeClass() and addClass() instead of replaceClass() in jQuery - Example
Replacing one class with another is done using removeClass () and adding with the addClass () functions in jQuery, because the replaceClass () function does not have the appropriate functionality to display.
In this sense, the only difference is instead of the replaceClass () function; we use removeClass () with the class we want to replace with another class and then followed by addClass (), which has the class name as the parameter to be displayed after the replacement.
<html>
<head>
<title> 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: #093;
font-family: "Comic Sans MS", cursive;
font-size: 18px;
font-weight: bold;
}
.classtwo {
color: #00F;
font-family: "Comic Sans MS", cursive;
font-size: 24px;
}
</style>
</head>
<body>
<p class ="classone"> Jquery with AgerNic.com </p>
<p class ="classtwo"> Jquery tutorial with AgerNic.com </p>
</body>
</html>
Replace a word ( text ) in multiple texts
Replace a word in several items on our site. All we have to do is repeat over them and call our function or just call the function several times on each of them:
<html lang="en">
<head>
<meta charset="utf-8">
<title> Demonstration of replaceClass() function in jQuery. </title>
<style>
body{
padding: 5em 2em;
}
#element{
font-size: 3em;
}
/**
Fixed button outside the fullpage.js wrapper
*/
#changeText{
top: 100px;
left: 350px;
position:fixed;
z-index:999;
font-size: 1em;
padding: 10px 20px;
}
.read-article{
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
color: #000;
background: white;
padding: 10px 20px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
background: #d5d5d5;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
const changeText = (e) => {
$('#myList li').each(function(){
$(this).text($(this).text().replace(/Hi/g, "Helo"));
});
// Replacing two other texts in other elements
var element1 = $('#element1');
element1.text(element1.text().replace(/Hi/g, "Helo"));
var element2 = $('#element2');
element2.text(element2.text().replace(/Hi/g, "Helo"));
};
// Attaching the click event on the button
$(document).on('click', '#changeText', changeText);
</script>
</head>
<body>
<ul id="myList">
<li>Hi, tutorial jQuery with AgerNic.com</li>
<li>Hi, tutorial jQuery with AgerNic.com</li>
<li>Hi, tutorial jQuery with AgerNic.com</li>
<li>Hi, tutorial jQuery with AgerNic.com</li>
<li>Hi there Hi there</li>
</ul>
<div id="element1">Hi my friend</div>
<div id="element2">He said Hi!</div>
<button id="changeText">Replace Text</button>
</body>
</html>
jquery replace text, replace element, find and replace html, string replace all, replace text in div, replace innerhtml, innerhtml, change div content dynamically, html in div, text in string, class, character in string,
What is replace in jQuery?
How can I replace part of a string in jQuery?
How do you replace an element with another in jQuery?
What is $() in jQuery?
JQuery replaceClass - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.