JQuery Odd and Even

From CoderLearner
Jump to: navigation, search

jQuery Odd and Even Selector

Assign HTML elements use :odd and :even selector.

Syntax

	$('ul.list88 li:even').css('background-color','gray');
	$('ul.list88 li:odd').css('background-color','red');			

Note

Example 1

<!DOCTYPE html>
<html>
   <head>
      <title>odd even</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(document).ready(function(){
            $('ul.list88 li:even').css('background-color','gray');
            $('ul.list88 li:odd').css('background-color','red');
         });
      </script>
   </head>
   <body>
      <ul class="list88">
         <li>Soft ware</li>
         <li>Soft wear</li>
         <li>Soft where</li>
         <li>Soft vhere</li>
      </ul>
   </body>
</html>

Try It

Example 2

   <!DOCTYPE html>
<html>
   <head>
      <title>odd even</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(document).ready(function(){
            $('ul.list88 li:even').css('background-color','gray');
            $('ul.list88 li:odd').css('background-color','red');
         });
      </script>
   </head>
   <body>
      <ul class="list88">
         <li>Soft ware</li>
         <li>Soft wear</li>
         <li>Soft where</li>
         <li>Soft vhere</li>
      </ul>
   </body>
</html>

Try It

Example 3

<!DOCTYPE html>
<html>
   <head>
      <title>odd even</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <style>
         .odd
         {
            background-color: #6699CC;
         }

         .even 
         {
            background-color: #999900;
         }
      </style>
      <script>
         $(document).ready(function(){
            $('tr:even').addClass('even');
            $('tr:odd').addClass('odd');
         });
      </script>

   <body>
      <table>
         <tr>
            <th>Gender</th>
            <th>Population</th>
            <th>Unknown</th>
            <th>Study</th>
         </tr>
         <tr>
            <td>Male-Unknown</td>
            <td>400</td>
            <td>30%</td>
            <td>70%</td>
         </tr>
         <tr>
            <td>Male-India</td>
            <td>800</td>
            <td>10%</td>
            <td>90%</td>
         </tr>
         <tr>
            <td>Female-Vietnamese</td>
            <td>800</td>
            <td>20%</td>
            <td>80%</td>
         </tr>
         <tr>
            <td>Male-White</td>
            <td>800</td>
            <td>20%</td>
            <td>80%</td>
         </tr>
      </table>
   </body>
</html>

Try It

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>