カテゴリごとのグループ分け・絞り込み

Question

カテゴリごとに絞り込みを行っていますがうまくいきません。
教えていただけますでしょうか。

例えば同じHTML内に記載している

カテゴリーのプレスリリースをクリックでプレスリリースのみ表示。
ニュースをクリックでニュースのみを表示させたいです。

現在のタグはこちらです。
うまくうごきません。

〇HTML〇

<div class="box-taglist"> <h4>カテゴリー</h4> <ul class="list-inbl"> <div class="btn"> <li class="cat-item"><a href="" title="ALL"　data-filter="all">ALL</a></li> <li class="cat-item"><a href="" title="プレスリリース"　data-filter="tn_ctg_press">プレスリリース</a></li> <li class="cat-item"><a href=""　data-filter="tn_ctg_news">ニュース</a></li> </div> </ul> </div> <div id="newslist_wrapper"> <div id="newslist"> <ul id="topnws_list"> <div class="list"> <li class="clearfix" data-category="tn_ctg_press"> <div class="tn_ctg tn_ctg_press"><div>プレスリリース</div></div> <div class="topnews"><a href="/pdf/20201102.pdf" target="_blank"><span class="topnews_date">2020/〇〇/</span>プレスリリース更新しました</a></div> </li> <li class="clearfix" data-category="tn_ctg_news"> <div class="tn_ctg tn_ctg_news"><div>ニュース</div></div> <div class="topnews"><span class="topnews_date">2020/〇〇/</span>ニュース更新しました。</div> </li> </div><!-- /#list --> </ul> </div> </div><!-- /#newslist -->

〇JS〇
$(function(){
var $btn = $('.btn [data-filter]'),
$list = $('.list [data-category]');

$btn.on('click', function(e) {
e.preventDefault();

var $btnTxt = $(this).attr('data-filter');
 
if ($btnTxt == 'all'){
  $list.fadeOut().promise().done(function() {
    $list.addClass('animate').fadeIn();
  });
} else {
  $list.fadeOut().promise().done(function() {
    $list.filter('[data-category = "' + $btnTxt + '"]').addClass('animate').fadeIn();
  });
}

});
});

よろしくお願いいたします。

Answer 1

自己解決できました！
タグの書き方の誤りでした