odd selector in jQuery with example

Home » JQuery » jQuery Selectors » odd selector in jQuery with example

odd selector in jQuery with example

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Selectors

odd selector selects all the elements at odd position in the page.
The odd selector can be used to apply CSS to odd tr's of a table.

Example :

    <html>
    <head>
    <title>odd Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("p:odd").css({'font-size':'20px','background-color':'Orange'});
    });
    });
    </script>
    </head>
    <body>
    <p>This is first paragraph element.</p>
    <p>This is Second paragraph element.</p>
    <p>This is Thire paragraph element.</p>
    <p>This is fourth paragraph element.</p>
    <p>This is five paragraph element.</p>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :

In the above example, we have used odd selector. Odd selector selects all the elements at odd place in the page. In above example, it selects all the p elements at odd position and applies CSS to all of them.