添加斑马条纹但忽略隐藏元素答案

【问题标题】：Add zebra striping but ignore hidden elements添加斑马条纹但忽略隐藏元素
【发布时间】：2014-05-19 21:19:27
【问题描述】：

我有以下代码，它根据添加到 li 元素的类来过滤列表。当所有项目都显示时，斑马条纹工作正常，但是当您过滤并假设其中一个列表项目被隐藏时，斑马条纹不同步。有没有办法解决这个问题？

我已经检查了这篇文章，但没有工作jQuery Table Zebra Striping with hidden rows

谢谢。

//Filter
$("#local-clubs-list li:visible:even").addClass("even");

$('ul#filter a').click(function() {  
    $(this).css('outline','none');  
    $('ul#filter .current').removeClass('current');  
    $(this).parent().addClass('current');  

    var filterVal = $(this).text().toLowerCase().replace(' ','-');  

    $('ul#local-clubs-list li').each(function() {                                 
        if(!$(this).hasClass(filterVal)) {  
            $(this).fadeOut('normal').addClass('hidden');
        } else {  
            $(this).fadeIn('slow').removeClass('hidden');
        }  

        $("#local-clubs-list li").removeClass("even");


        $("#local-clubs-list li:visible:nth-child(even)").addClass("even");
    });  


    return false;  
}); 

$('ul#filter a:eq(0)').trigger('click');

我在 firbug 中看到的是

<li class="northern even">
<li class="northern">
<li class="north-dublin hidden even" style="display: none;">
<li class="northern">
<li class="northern even">
<li class="northern">
<li class="northern even">
<li class="northern">
<li class="northern even">

【问题讨论】：

$("#local-clubs-list li:visible:nth-child(even)").addClass("even"); 应该适用于选择器。您必须删除该类并在隐藏任何 li 之后重新运行它。
我似乎无法让它发挥作用。任何代码帮助将不胜感激
这在初始显示方面有效jsfiddle.net/Wp7SA/1

标签： jquery filter zebra-striping

【解决方案1】：

由于某种原因 hidden 不能很好地工作，我不得不添加和删除类。这是有效的正式代码。

//Filter

    function zebraRows(selector, className)
    {
        $(selector).removeClass(className).addClass(className);
    }
    $('#local-clubs-list li').addClass('visible');

    $('ul#filter a').click(function() {  
        $(this).css('outline','none');  
        $('ul#filter .current').removeClass('current');  
        $(this).parent().addClass('current');  

        var filterVal = $(this).text().toLowerCase().replace(' ','-');  

        $('ul#local-clubs-list li').each(function() {                                 
            if(!$(this).hasClass(filterVal)) {  
                $(this).fadeOut('normal').addClass('hidden');
                $(this).fadeOut('normal').removeClass('visible');

            } else {  
                $(this).fadeIn('slow').removeClass('hidden');
            }  
        });  

        $('#local-clubs-list li').removeClass('even');
        zebraRows('#local-clubs-list .visible:even', 'even');
        $('#local-clubs-list li').addClass('visible');
        return false;  
    }); 

    $('ul#filter a:eq(0)').trigger('click');

【讨论】：

【解决方案2】：

您需要删除 even 类，然后在您的过滤器函数中再次添加该类。

类似

       $('ul#local-clubs-list li').each(function() {  
            if(!$(this).hasClass(filterVal)) {  
                $(this).fadeOut('normal').addClass('hidden');  
            } else {  
                $(this).fadeIn('slow').removeClass('hidden');  
            }  

         $("#local-clubs-list li").removeClass("even");
         $("#local-clubs-list li:nth-child(even)").addClass("even");

        });

【讨论】：

它仍然为隐藏元素添加了“偶数”类。我更新了我的代码，但没有成功
你如何隐藏lis..？ display:none;?

【解决方案3】：

我也使用数据表。喜欢它，艾伦很喜欢它，但我不使用为“斑马条纹”添加的类

如果您的用户已经超过 IE8，您可以让 CSS 这样做：

tr:nth-child(even) {
    background-color: #000;
}

tr:nth-child(odd) {
    background-color: #FFF;
}

【讨论】：