jquery Zebra 列表奇偶数据过滤后显示。

Question

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

$('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 都是白色背景，它保留了旧的奇偶值。谢谢

Answer 1

你可以写一个函数来更新 odd,even classes 在像这样过滤元素之后

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