jQuery：表示されている要素をリアルタイムでフィルターする。

選択したラジオボタンの値に合わせて要素にフィルターをかけ、リアルタイムで表示/非表示を切り替えます。

実現方法

jQueryのfilter()で実装していきます。

HTML

inputのvalue属性とitemのdata-tag属性を一致させる。

<section>
    <h2>フィルター</h2>
    <div class="filter">
        <div id="filter">
            <label>奇数
                <input type="radio" name="filter" value="odd" checked>
            </label>
            <label>偶数
                <input type="radio" name="filter" value="even">
            </label>
        </div>
        <div id="filter_area">
            <p class="item" data-tag="odd">1</p>
            <p class="item" data-tag="even">2</p>
            <p class="item" data-tag="odd">3</p>
            <p class="item" data-tag="even">4</p>
            <p class="item" data-tag="odd">5</p>
        </div>
    </div>
</section>

Javascript

// filterテスト
$('input:radio[name="filter"]').change(function() {
    const list = $('#filter_area > .item');
    const filterValue = $('input:radio[name="filter"]:checked').val();
    const filteredList = list.filter(function(){
        // thisにはlistの中のDOM要素が１つずつ入る
        return ($(this).data('tag') == filterValue);
    })
    // アニメーション使いたい時はsetTimeoutとか使う。
    list.hide();
    filteredList.show();
});

今回はfilter()の中にfunction()を入れていますが、class名などでもフィルターをかけることができます。
const list = list.filter($(“.odd”))　とか。

リファレンスを見ると、いろいろな書き方がサンプルで載っているので分かりやすいです。
https://api.jquery.com/filter/

HTMLのdata属性

data-hogehogeみたいに独自の名前を定義できます。
jQueryで値を取得するときは下記。

// HTML
<p class="test" data-hogehoge="value1">てすと</p>

// js
const testData = $('.test').data('hogehoge');

animationをつけて表示させたいときは、filter後にclassだけ付与して、あとはcss側でtransition-delayとかdisplayとかコントロールすると良いです。

■参考

・jQueryリファレンス：filter()
https://api.jquery.com/filter/