Question

I have a problem displaying “zebra” list after filtering results.
I have a zebra list which display perfect here is the code:

$('ul li:odd').addClass('zebra_odd');
$('ul li:even').addClass('zebra_even');

The problem comes when I filter that list an input like this:

  $('input').keyup(function() {                   
    var textboxVal = $(this).val().toLowerCase();   
    $('ul li').each(function() {                    
    var listVal = $(this).text().toLowerCase();     
      if(listVal.indexOf(textboxVal) >= 0) {      
        $(this).show();                        
      } else {
        $(this).hide();                         
      }

i.e. on the list I have this values: a1, b1, a2, b2, a3, b3. The list display the values on zebra rows perfect, but if I filter the data i.e. “a” it will show me a1, a2, a3 all in white background, it kept the old odd, even values. Thanks

Answer 1

You can write a function to Update odd,even classes after filtering the elements like this

function setOddEven() {
    $('li:visible:odd').removeClass('odd even').addClass('odd');
    $('li:visible:even').removeClass('odd even').addClass('even');
}
$(function() {
    setOddEven();
    $('input').keyup(function() {
        var textboxVal = $(this).val().toLowerCase();
        $('ul li').each(function() {
            $this = $(this); // cache the object for better performance
            var listVal = $this.text().toLowerCase();
            if (listVal.indexOf(textboxVal) >= 0) {
                $this.show();
            } else {
                $this.hide();
            }
        });
        setOddEven();
    });
});​

Working Fiddle

Dont forget the :visible selector, or it will take hidden elements into account and hence wont work properly.