jQuery addClass

Filed Under: jQuery

jQuery addClass function is used to add one or more specified classes to the matched DOM elements.

jQuery addClass

Here is a simple example showing usage of jQuery addClass() method. jQuery version used in example is 3.2.1.


<html>
<head>
<!-- import jQuery library -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<!-- jQuery functions for addClass example -->
<script type="text/javascript">
	$(function() {
		$("p:last").addClass("selected highlight");
	});
	$(function() {
		$("p:first").addClass("highlight");
	});
</script>
<style>
p {
	margin: 10px;
	font-size: 16px;
}

.selected {
	color: maroon;
}

.highlight {
	background: yellow;
}
</style>
</head>

<body>
	<p>Pankaj</p>
	<p>Kumar</p>
	<p>Bye</p>
</body>

</html>

In jQuery addClass function, we are adding classes “selected” and “highlight” to the element p:last.

Similarly we are adding class “highlight” to p:first. So when page loads, these classes are applied to the <p> first and last child and html is formatted.

The below image shows the jQuery addClass example HTML page output in browser.

jQuery addClass

jQuery addClass example for zebra stripes effect

We are using jQuery addClass() method to create zebra stripes effect in HTML table. The html code is given below.


<html>
<head>
<title>jQuery addClass Example - Table Zebra Stripes</title>
</head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<!-- jQuery script to check if row is even, addClass is used to add CSS class to the row  -->
<script type="text/javascript">
      $(function() {
        $("table tr:nth-child(even)").addClass("striped");
      });
    </script>
<!-- Below CSS is used for configuring table display -->
<style type="text/css">
body,td {
	font-size: 12px;
}

table {
	background-color: black;
	border: 1px black solid;
	border-collapse: collapse;
}

th {
	border: 1px outset silver;
	background-color: blue;
	color: white;
}

tr {
	border: 1px outset silver;
	background-color: white;
	margin: 1px;
}

tr.striped {
	border: 1px outset silver;
	background-color: yellow;
}

td {
	padding: 1px 10px;
}
</style>


<body>
	<table>
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Role</th>
		</tr>
		<tr>
			<td>1</td>
			<td>Pankaj</td>
			<td>CEO</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Lisa</td>
			<td>Manager</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Robin</td>
			<td>Support</td>
		</tr>
		<tr>
			<td>4</td>
			<td>David</td>
			<td>Editor</td>
		</tr>
	</table>
</body>
</html>

Below image shows the jQuery addClass zebra effect output in browser.

jQuery addClass example zebra stripes effect table

In above html, we are adding “striped” class to every even child of the table row using condition table tr:nth-child(even) dynamically. That’s all about jQuery addClass method.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages