Odd and Even Element in jQuery in Tamil

In jQuery, you can use the :odd and :even selectors to target and manipulate elements based on their position within a matched set. These selectors are useful for applying styles or performing actions on alternate elements in a collection.

:odd Selector

The :odd selector targets elements with odd indices within a matched set. The index is zero-based, so the first element has an index of 0, the second has an index of 1, and so on.

:even Selector

The :even selector targets elements with even indices within a matched set. Similar to :odd, the index is zero-based.

Combining with Other Selectors

You can combine :odd and :even selectors with other selectors to create more specific queries.

Source Code

This HTML and jQuery code demonstrates the use of the :odd and :even selectors to apply different styles to odd and even rows within an HTML table. Let's break down the code

The code selects odd rows (tr:odd) and applies a red text color to them using .css('color', 'red').
It selects even rows (tr:even) and applies a green text color to them using .css('color', 'green').
Odd rows in the table will have red text color, and even rows will have green text color.

This demonstrates how the :odd and :even selectors in jQuery can be used to style alternate rows differently within an HTML table.

<html>
	<head>
		<title>ODD Even Selector</title>
	</head>
	<body>
		<h1>Tutor Joes</h1>
		<table>
			<tr>
				<td>DATA-0</td>
				<td>DATA</td>
			</tr>
			<tr>
				<td>DATA-1</td>
				<td>DATA</td>
			</tr>
			<tr>
				<td>DATA-2</td>
				<td>DATA</td>
			</tr>
			<tr>
				<td>DATA-3</td>
				<td>DATA</td>
			</tr>
			<tr>
				<td>DATA-4</td>
				<td>DATA</td>
			</tr>
			<tr>
				<td>DATA-5</td>
				<td>DATA</td>
			</tr>
		</table>
		<script src="js/jquery.js"></script>
		<script>
			$("document").ready(function(){
				$("tr:odd").css('color','red');
				$("tr:even").css('color','green');
			});
		</script>
	</body>
</html>

In summary, the :odd and :even selectors in jQuery provide a convenient way to target and manipulate elements based on their position within a set, allowing you to apply specific actions to alternate elements in a collection.