[jQuery] Re: jquery code snippit improvement request

[Michael Geary]

First, combine duplicate code into a single function:

$(document).ready(function() {
    zebra();
    $('th').click( zebra );
});

function zebra() {
    $('tbody.bevker tr:odd').removeClass();
    $('tbody.bevker tr:even').removeClass();
    $('tbody.bevker tr:odd').addClass('row0 odd');
    $('tbody.bevker tr:even').addClass('row1 even');
    return false;
}

I also took the liberty of changing the indentation style slightly - you're
using two levels of indentation where one would do (by giving the braces
their own separate indentation). Naturally you can do this any way you want,
but I didn't see any benefit to the extra indents, so bear with me. :-) In
addition, I used spaces for indents instead of tabs. I actually do prefer
tabs, but in an email message the spaces sometimes work better.

Next, use chaining to remove the duplicate $() selectors:

function zebra() {
    $('tbody.bevker tr:odd').removeClass().addClass('row0 odd');
    $('tbody.bevker tr:even').removeClass().addClass('row1 even');
    return false;
}

Also, since you are completely replacing the class, it would be faster to do
it in one call:

function zebra() {
    $('tbody.bevker tr:odd').attr( 'class', 'row0 odd' );
    $('tbody.bevker tr:even').attr( 'class', 'row1 even' );
    return false;
}

Then, if there is only a single table you're working with, you can speed up
the code a little by pulling out the common part of the selector:

function zebra() {
    var tbody = $('tbody.bevker')[0];
    $('tr:odd',tbody).attr( 'class', 'row0 odd' );
    $('tr:even',tbody).attr( 'class', 'row1 even' );
    return false;
}

This would not work if you have multiple tables, but it looks like the code
is already assuming a single table.

You could also set both the even and odd row classes in a single pass. This
would probably be even faster:

function zebra() {
    $('tbody.bevker tr').each( function( i ) {
        $(this).attr( 'class', i % 2 ? 'row1 even' : 'row0 odd' );
    });
    return false;
}

Or better yet, speed up that inner loop by using the DOM directly instead of
.attr():

function zebra() {
    $('tbody.bevker tr').each( function( i ) {
        this.className = i % 2 ? 'row1 even' : 'row0 odd';
    });
    return false;
}

I may have the even and odd reversed on the last two examples, but that's
easy to fix.

-Mike

> From: FrankTudor
> 
> Here is a bit of code that on page load sets the alternating 
> color of a table.
> 
> Then there is a table sort tool that loads as well.  The th 
> (header) clicks cause the nice alternating line colors to 
> sort as well. So I created this, which works perfect, but it 
> looks clunky/repetitive..
> 
> I was thinking about wrapping an if statement in here 
> somewhere, or maybe there is something else other people can think of.
> 
> <script type="text/javascript">
> $(document).ready(function()
>       {
>               $('tbody.bevker tr:odd').removeClass();
>               $('tbody.bevker tr:even').removeClass();
>               $('tbody.bevker tr:odd').addClass('row0 odd');
>               $('tbody.bevker tr:even').addClass('row1 even');
> 
>       $('th').click(function()
>               {
>                       $('tbody.bevker tr:odd').removeClass();
>                       $('tbody.bevker tr:even').removeClass();
>                       $('tbody.bevker tr:odd').addClass('row0 odd');
>                       $('tbody.bevker tr:even').addClass('row1 even');
>                       return false;
>               }
>               );
>       }
> );
> </script>