jQuery API

:odd Selector

odd selector

version added: 1.0jQuery(':odd')

Description: Selects odd elements, zero-indexed. See also even.

In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.

Additional Notes:

  • Because :odd is a jQuery extension and not part of the CSS specification, queries using :odd cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :odd to select elements, first select the elements using a pure CSS selector, then use .filter(":odd").
  • Selected elements are in the order of their appearance in the document.

Example:

Finds odd table rows, matching the second, fourth and so on (index 1, 3, 5 etc.).

<!DOCTYPE html>
<html>
<head>
  <style>

  table {
    background:#f3f7f5;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>

    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>
<script>$("tr:odd").css("background-color", "#bbbbff");</script>

</body>
</html>

Demo:

Support and Contributions

Need help with :odd Selector or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to :odd Selector? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • http://profiles.yahoo.com/u/ALHAG3USYUAQITVHWXQW53BSBU Julian

    Shouldn’t it select the first element? That would make jQuery “even” better. :)
    Cheers, you guys rock.

    • Warren Buckley

      I agree this seems a bit confusing as you don’t count from 0 when you have a list of items.

      It should always start from 1 and not 0, as I have had to do, which feels wrong!

      //Alt Table rows (Counts at 0 and not 1)
      $(“tr.data:even”).addClass(“odd”);

      • http://www.learningjquery.com/ Karl Swedberg

        Sorry, but JavaScript, along with nearly every other programming language, is 0-indexed. So, however it “feels” to you at the moment, if you spend a bit more time learning the language, you may start to appreciate the implications.

        As for your example, why do you need to use an “odd” class? You’d be better off using something less specific anyway, such as “alt”.

  • http://profiles.yahoo.com/u/ALHAG3USYUAQITVHWXQW53BSBU Julian

    Shouldn’t it select the first element? That would make jQuery “even” better. :)
    Cheers, you guys rock.

  • Luca

    Is there a way you can select on odd object by class not a tag?

    • http://www.learningjquery.com/ Karl Swedberg

      Like $('.someclass:odd') ? Yep.

      • Alfi021

        how can i choose table tr with table already has a class? please give a sample.

  • http://kflorence.myopenid.com/ Kyle Florence

    I think the problem here is that people need to realize this is manipulating an array of objects within JavaScript that have a zero-based index, and that this selector operates upon that array, not what is represented visually on the screen. So, when you look at your list, what you would see as the first item, is in fact “0″ in the array, and thus is an “even” entry.

    If this behavior is not desired, you can always write your own selector!

  • http://twitter.com/ardhitama Primanata Ardhitama

    The jquery's odd / even selector disable the css :hover, make it as notice

  • André

    $(“tr:odd”).addClass(“odd”);
    starts with the first tr in the document and increments on every following tr – even in new tables! Example: If table1 has 3 rows (even, odd, even) then table2's first tr is not even!

    • http://www.thewebdes.co.uk/ Scott Brown

      For my case where this is happening:
      $('#nav ul li:nth-child(odd) a').addClass('even');
      Seems to take each element as independent and gets round your problem.

      • http://twitter.com/frederickweiss Frederick P Weiss

        This worked perfectly for me… THANK YOU SCOTT!

        - Frederick

  • Adrien

    How the selector odd/even can avoid selecting the element hide by the .hide() method?

    • Adrien

      I have found the :hidden/:visible selector sorry for the question

  • http://twitter.com/frederickweiss Frederick P Weiss

    This worked perfectly for me… THANK YOU SCOTT!

    - Frederick