:even Selector

Categories: Selectors > Basic Filter | Selectors > jQuery Extensions

even selector

version added: 1.0jQuery(':even')

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

In particular, note that the 0-based indexing means that, counter-intuitively, :even selects the first element, third element, and so on within the matched set.

Additional Notes:

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

Example:

Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).

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

  table {
    background:#eeeeee;
  }
  </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:even").css("background-color", "#bbbbff");</script>

</body>
</html>

Demo:

Support and Contributions

Need help with :even 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 :even Selector? Report it to the jQuery core team.

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

dblosevn

This line is confusing in the documentation.
“Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).”
It should be
“Finds even table rows, matching the first, third and so on (index 0, 3, 5 etc.).”

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

Sorry, but it’s correct as is. The first, third, and fifth are equivalent to indexes 0, 2, and 4.
Kevsta

It's because selectors are 0-based. This means that they start at 0 and increment.
An exception to that would be :nth-child() which is 1-based, meaning it starts at 1 and increments.

Ionnini

And what about a bigger step, is there a selector? (for example a 5 step)

Anonymous

Unfortunately no, your best option would be to use nth-child():
$(“tr:nth-child(5n)”).css(“background-color”, “#bbbbff”);

Or you can iterate through each element and only highlight the ones that meet the correct condition. For example, a 5 step would be:
$(“tr”).each(function (index) {
if (index % 5 == 0) $(this).css(“background-color”, “#bbbbff”);
})

Index is the number of times the function runs. To increase the step you would just change the 5:
$(“tr”).each(function (index) {
if (index % 10 == 0) $(this).css(“background-color”, “#bbbbff”);
})

http://www.professionalsofttech.com Tusharr_1987

Can i save the result from $(“something:even”) in an array and iterate through the loop?

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

You can save the result of any jQuery collection and iterate through it. Check out .each().

var myResult = $('whatever-i-want');
myResult.each(function(index) {
// do something.
// Use this to do something with the current DOM node or
// use $(this) to call a jQuery method on the current DOM node.
});

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

You can save the result of any jQuery collection and iterate through it. Check out .each().

var myResult = $('whatever-i-want');
myResult.each(function(index) {
// do something.
// Use this to do something with the current DOM node or
// use $(this) to call a jQuery method on the current DOM node.
});
http://pulse.yahoo.com/_SRN2QWHJWZDA7TAZ7WI5TT5KY4 Dan
You can also extend jQuery to add a .even() function like this:
```
(function($) {  $.fn.even = function() {   for (var i = this.length - 1; i > 0; i--)   if (i % 2) this.splice(i, 1);   return this;  }; })(jQuery);
```
I was curious how this compares to :each , so I created this performance comparison test at jsPerf: http://jsperf.com/select-even-rows/2

It shows that the .even function is the fastest, followed by testing i % 2 in .each() and last is the :even selector (at about 50% slower).
Curious George

a bit curious why Dan's function doesn't return index out of bounds exception. Suppose you have an array a = [0..8], size 9. Suppose your loop ran 5 itterations and your i is now 8. like this {i=0,i=2,i=4,i=6,i=8}. check i<l 10.=”" 2.=”" 8=”" 9,=”" <=”" a[10],=”" access=”" and=”" be=”" because=”" by=”" i=”" illegal.=”" increase=”" is=”" now=”" passes=”" should=”" so=”" than=”" that=”" to=”" try=”" will=”" you=”" your=”"></l>
Curious George

Sorry about previous post, the form reformated my post. Suppose you have an array a = [0..8]. a contains 9 elements. After 5 iterations i = 8. check i<l 10.=”" 2,=”" 8=”" 9.=”" <br=”" a[10]=”" because=”" bounds.=”" by=”" does=”" i=”" increase=”" index=”" is=”" it=”" not=”" now=”" of=”" out=”" smaller=”" so=”" than=”" that=”" throw=”" true=”" we=”" why=”">

Is it something jQuery saves us from?</l>
newb

how do u check if the first row of a table is even??

if ($(#table tbody tr:first:even)) { do something } ??

is that correct

jQuery API