3

I have the following code which filters a list according to what class is added to the li element. The zebra striping works fine when all items are showing but when you filter and lets say one of the list items is hidden teh zebra stripe goes out of sync. Is there a way around this?

I have checked this post but ie did not work jQuery Table Zebra Striping with hidden rows

Thanks.

//Filter
$("#local-clubs-list li:visible:even").addClass("even");

$('ul#filter a').click(function() {  
    $(this).css('outline','none');  
    $('ul#filter .current').removeClass('current');  
    $(this).parent().addClass('current');  

    var filterVal = $(this).text().toLowerCase().replace(' ','-');  

    $('ul#local-clubs-list li').each(function() {                                 
        if(!$(this).hasClass(filterVal)) {  
            $(this).fadeOut('normal').addClass('hidden');
        } else {  
            $(this).fadeIn('slow').removeClass('hidden');
        }  

        $("#local-clubs-list li").removeClass("even");


        $("#local-clubs-list li:visible:nth-child(even)").addClass("even");
    });  


    return false;  
}); 

$('ul#filter a:eq(0)').trigger('click');

What I am seeing in firbug is

<li class="northern even">
<li class="northern">
<li class="north-dublin hidden even" style="display: none;">
<li class="northern">
<li class="northern even">
<li class="northern">
<li class="northern even">
<li class="northern">
<li class="northern even">
Community
  • 1
  • 1
  • `$("#local-clubs-list li:visible:nth-child(even)").addClass("even");` should work for a selector. You'll have to remove the class and re-run this for every `li` after any which get hidden. – Michael Mior Oct 12 '11 at 11:48
  • I can't seem to get that to work. Any code help would be much appreciated –  Oct 12 '11 at 11:58
  • This works as far as the initial display is concerned http://jsfiddle.net/Wp7SA/1/ – Michael Mior Oct 12 '11 at 13:13

3 Answers3

1

For some reason hidden doesn't work well and I had to add and remove classes. Here is the fonal code that works.

//Filter

    function zebraRows(selector, className)
    {
        $(selector).removeClass(className).addClass(className);
    }
    $('#local-clubs-list li').addClass('visible');

    $('ul#filter a').click(function() {  
        $(this).css('outline','none');  
        $('ul#filter .current').removeClass('current');  
        $(this).parent().addClass('current');  

        var filterVal = $(this).text().toLowerCase().replace(' ','-');  

        $('ul#local-clubs-list li').each(function() {                                 
            if(!$(this).hasClass(filterVal)) {  
                $(this).fadeOut('normal').addClass('hidden');
                $(this).fadeOut('normal').removeClass('visible');

            } else {  
                $(this).fadeIn('slow').removeClass('hidden');
            }  
        });  

        $('#local-clubs-list li').removeClass('even');
        zebraRows('#local-clubs-list .visible:even', 'even');
        $('#local-clubs-list li').addClass('visible');
        return false;  
    }); 

    $('ul#filter a:eq(0)').trigger('click');
0

I use datatables as well. Love it and Allan rocke it but I don't use the added classes for 'zebra stripes'

If your users are past IE8 you could just let CSS do it like so:

tr:nth-child(even) {
    background-color: #000;
}

tr:nth-child(odd) {
    background-color: #FFF;
}
Joe Johnston
  • 2,794
  • 2
  • 31
  • 54
0

You need to remove the even class and then add that class again inside your filter function.

So something like

       $('ul#local-clubs-list li').each(function() {  
            if(!$(this).hasClass(filterVal)) {  
                $(this).fadeOut('normal').addClass('hidden');  
            } else {  
                $(this).fadeIn('slow').removeClass('hidden');  
            }  

         $("#local-clubs-list li").removeClass("even");
         $("#local-clubs-list li:nth-child(even)").addClass("even");

        });  
Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86