Jquery Zebra在过滤数据后列出奇数偶数显示。

我在过滤结果后显示“斑马”列表时出现问题。我有显示完美这里斑马列表是代码：Jquery Zebra在过滤数据后列出奇数偶数显示。

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

问题是当我筛选列表这样的输入：

$('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();       
     }

即在名单上我有这样的价值观： a1, b1, a2, b2, a3, b3.该列表显示斑马线上的数值完美，但如果我过滤数据即“a”，它会在白色背景中显示a1，a2，a3，它保留了旧的奇数，偶数值。由于

来源

2012-06-15 Helder Alvarez

为什么没有你的样式表中的奇数和偶数的'ul li：odd'，'ul li：even'而不是一个新的类？ – Neal

在CSS这样的东西？ li：nth-child（奇怪）{color：black} li：nth-child（偶数）{color：white} ??我对编程新手不确定你的建议。 –

检查我的答案，它做你想做的。在过滤/隐藏元素后，CSS元素将无法正常工作。 –

您可以编写一个函数过滤这样

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

不要忘了:visible选择后更新odd,even类，或将需要隐藏的因素考虑进去，因此不会工作正常。

来源

2012-06-15 17:07:33

完美的作品！谢谢。 –

非常欢迎。 :) –

Jquery Zebra在过滤数据后列出奇数偶数显示。

回答

相关问题