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

Working Fiddle

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

过滤数据后，Jquery Zebra列出奇数均匀显示。

1 个答案: