How to use addclass() method with function in JQuery
In this article, I will explain use of addclass() method with function in JQuery.
JQuery CSS addclass() Method with Function
-
A function
returning one or more space-separated class names to be added to the
existing class.
-
In function,
this
refers to the current element in the set.
Syntax
|
$(selector).addClass(function(index,oldclass))
|
Example
The following example shows how to addclass()
method using function in jquery.
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function
()
{
$("button").click(function
()
{
$('p').addClass(function
(n)
{
return
'class_' + n;
});
});
});
</script>
<style type="text/css">
.class_0
{
color:Lime;
font-style:italic;
background-color:Teal;
}
.class_1
{
color:red;
font-style:oblique;
background-color:Yellow;
}
</style>
</head>
<body>
<h1>Add Class Using a
Function</h1>
<p>First
paragraph.</p>
<p>Second
paragraph.</p>
<button
style="border-bottom-style:solid">Add classes to p elements</button>
</body>
</html> |
Output
Further Readings
You may also want to read these related articles
here
Ask Your
Question
Got a
programming related question? You may want to post your question here
Programming
Answers here