jquery - 过滤数据后 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类

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

工作小提琴

不要忘记:visible选择器，否则它将考虑隐藏元素，因此无法正常工作。