Demoを見る

大分前にやったやつだけど、ネタが無いので書いておきます（以下に紹介するフィルタリングはfactory.yusukenakanishi.comでも使ってます）。元ネタはこちらにQuick and Easy Filtering with jQuery – Nettuts+。そのままやっても勉強にならないので自分なりに改良を。

HTML

<ul id="list">
    <li><a href="hoge" title="PHP HTML">PHP and HTML/XHTML</a></li>
    <li><a href="hoge" title="PHP">PHP</a></li>
    <li><a href="hoge" title="JavaScript HTML">JavaScript and HTML/XHTML</a></li>
    <li><a href="hoge" title="JavaScript">JavaScript and jQuery</a></li>
    <li><a href="hoge" title="JavaScript CSS">javascript and CSS</a></li>

    // 中略

</ul>

JavaScript

$(function(){
    // フィルタリングのメニュー
    var filteringMenu = '<ul id="filtering"> <li class="selected"><a href="#New">最新の10件<\/a><\/li> <li><a href="#ALL">ALL<\/a><\/li> <li><a href="#HTML">HTML/XHTML<\/a><\/li> <li><a href="#CSS">CSS<\/a><\/li> <li><a href="#JavaScript">JavaScript<\/a><\/li> <li><a href="#jQuery">jQuery<\/a><\/li> <li><a href="#PHP">PHP<\/a><\/li> <\/ul>'
    $('#list').before(filteringMenu);

    // #list liのtitle属性にALLを追加
    $('#list li a').each(function(){
        $(this).attr('title',$(this).attr('title')+' ALL');
    });

    // 最初に10件のみ表示させる
    $('#list li').hide();
    $('#list li:lt(10)').fadeIn('slow').removeClass('odd').filter(':odd').addClass('odd');

    // フィルタリング
    $('#filtering li a').click(function() {
        $('#filtering li').removeClass('selected');
        $(this).parent('li').addClass('selected');
        $('p.notes').remove();

        var filterTitle = $(this).attr('href').replace(/#/, '');

        // Newの場合は最新の10件だけを表示
        if (filterTitle == 'New') {
            $('#list li').hide();
            $('#list li:lt(10)').fadeIn().removeClass('odd').filter(':odd').addClass('odd');
        }
        else {
            // この条件に合うものを表示する
            $('#list li').hide().filter(function () {
                var listTitle = $(this).children('a').attr('title');
                var filterList = listTitle.indexOf(filterTitle);
                if (filterList >= 0) {
                    return filterTitle;
                }
            }).fadeIn().removeClass('odd').filter(':odd').addClass('odd');
            // 該当するものが何も無いときにメッセージを表示する
            if (filterList = $('#list li:visible').length == 0) {
                $('#list').before('<p class="notes">0件：該当するものがありません。<\/p>');
                $('p.notes').hide().fadeIn();
            }
        }
        return false;
    });
});

JavaScriptがOFF環境の時フィルタリングするメニューがあっても何の意味もなさないため、わざとJavaScriptで書き出すようにしています。元ネタではclass属性をフィルタリングしてるんだけど僕は何となくtitle属性に変えました。そして該当するものが無いときは何も無いとメッセージを表示させてます。

ここの書き方ダサいよとかあったら教えてくださいな。