even selector in jQuery with example

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

even selector in jQuery with example

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Selectors

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

Example :

    <html>
    <head>
    <title>even 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:even").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 even selector. Even selector selects all the elements at even place in the page. In above example, it selects all the p elements at even position and applies CSS to all of them.