过滤数据后 Jquery Zebra 列表奇偶显示。答案

【问题标题】：Jquery Zebra list odd even display after filtering data.过滤数据后 Jquery Zebra 列表奇偶显示。
【发布时间】：2012-06-18 18:39:51
【问题描述】：

过滤结果后显示“斑马”列表时出现问题。我有一个完美显示的斑马列表，代码如下：

$('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，它保持旧的奇数, 偶数值。谢谢

【问题讨论】：

为什么你的样式表上没有奇偶 ul li:odd、ul li:even 的 css 而不是一个新类？
css 中有这样的东西吗？ li:nth-child(odd) { color:black } li:nth-child(even) { color:white } ??我是编程新手，不确定您的建议。
检查我的答案，它可以满足您的需求。过滤/隐藏元素后，CSS 将无法正常工作。
@Neal，因为他正在过滤元素，:nth-child(odd or even) 不适用于这种情况。因为这些也会考虑隐藏元素。

标签： jquery css filter

【解决方案1】：

您可以在过滤这样的元素后编写一个函数来更新odd,even类

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 选择器，否则它会考虑隐藏元素，因此无法正常工作。

【讨论】：