3

li 要素に追加されたクラスに応じてリストをフィルタリングする次のコードがあります。ゼブラ ストライプは、すべてのアイテムが表示されている場合は正常に機能しますが、フィルター処理を行ってリスト アイテムの 1 つが非表示になっていると、ゼブラ ストライプが同期しなくなります。これを回避する方法はありますか？

この投稿を確認しましたが、つまり、非表示の行を使用したjQueryテーブルゼブラストライピングが機能しませんでした

ありがとう。

//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');

私がモミ虫で見ているのは

<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">
4

3 に答える 3

1

何らかの理由で hidden がうまく機能せず、クラスを追加および削除する必要がありました。これが機能するfinalコードです。

//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');
于 2011-10-12T12:59:53.063 に答える
0

私もデータテーブルを使用しています。それを愛し、アランはそれを揺るがしますが、「ゼブラストライプ」に追加されたクラスは使用しません

ユーザーがIE8を過ぎている場合は、CSSに次のようにさせることができます:

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

tr:nth-child(odd) {
    background-color: #FFF;
}
于 2014-05-19T13:19:27.457 に答える
0

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");

        });
于 2011-10-12T11:47:01.467 に答える