jQuery odd() method

The odd() method in jQuery is used to select the elements with an odd index number (such as 1, 3, 5, etc.). The index starts with 0. It is similar to the even() method, but it selects odd numbers.

The odd() method returns the odd indexed elements from the set of selected elements. This method is used without any arguments.

Syntax

It does not accept any parameter.

Let's see some of the illustrations to understand the working of the odd() method.

Example1

It is a simple example of using the odd() method. In this example, we are using the odd() method to select the list items with an odd index. There are ten list items starting from 0 to 9. The index starts from 0. So, on clicking the given button, the method will select the list elements that appeared on odd index values.

We have to click the given button to see the effect.

<html>
<head>
<title> jQuery odd() method </title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h3> Welcome to the javaTpoint.com </h3>
<h4> It is an example of using the jQuery odd() method. The index starts from 0. </h4>
<ul>
	<li> 0 </li>
	<li> 1 </li>
	<li> 2 </li>
	<li> 3 </li>
	<li> 4 </li>
	<li> 5 </li>
	<li> 6 </li>
	<li> 7 </li>
	<li> 8 </li>
	<li> 9 </li>
</ul>

<p> Click the below button to select the elements with odd index. </p>
<button> Click me </button>

<script>
$(document).ready(function(){
	$("button").click(function() {
	$("li").odd().css("background-color", "yellow");
    });
	});
</script>

</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

It is another example of using the odd() method. In this example, there are some checkboxes. We are using the odd() method to select the odd checkboxes. Here, there are six checkboxes starting from the zero index. The index starts from 0. So, on clicking the given button, the method will select the checkboxes that appeared on odd index values.

We have to click the given button to see the effect.

<html>
<head>
<title> jQuery odd() method </title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h3> Welcome to the javaTpoint.com </h3>
<h4> It is an example of using the jQuery odd() method. </h4>
<p> The index starts from 0. </p>

    Java <input type = "checkbox"> � � � �
  
    CSS <input type = "checkbox"> � � � �
  
    ES6 <input type = "checkbox"> � � � �
  
    HTML <input type = "checkbox"> � � � �
  
    jQuery <input type = "checkbox"> � � � �
	
	Bootstrap <input type = "checkbox">

<p> Click the below button to select the odd options. </p>
<button> Click me </button>

<script>
$(document).ready(function(){
	$("button").click(function() {
	$("input").odd().attr("checked", true);
    });
	});
</script>

</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -