jquery - データタグHTML5に基づいて複数の要素を編集するjQuery

Question

私は最初のjqueryスニペットを書いており、開発者用とシステム用の2つのフィルターリストがあるクールなフィルタリングシステムを構築しようとしています.

<div class="filters">
  <ul>
    <li><a data-filter="dev-monkey" href="#">monkey one</a></li>
    <li><a data-filter="dev-monkey2" href="#">monkey two</a></li>
    <li><a data-filter="dev-monkey3" href="#">monkey three</a></li>
    ...
  </ul>
</div>

<div class="filters">
  <ul>
    <li><a data-filter="system-zoo" href="#">the zoo</a></li>
    <li><a data-filter="system-jungle" href="#">the jungle</a></li>
    <li><a data-filter="system-ocean" href="#">the ocean</a></li>
    ...
  </ul>
</div>

だから私が望むのは、誰かがフィルターの名前をクリックして色を変えることですが、同時に複数のフィルターを実行することもできます。誰かがサルが取り組んでいるすべてのシステムを見ることができるように.

これまでのところ、私はこれを行うためにそれを持っています

$('.filters a').click(function(){
  $('.filters a').css('color','black');
  $(this).css('color','red');
});

これにより、クリックしたばかりのフィルターが赤く強調表示され、他のすべてが黒くなります。

ここから私はそれに深く入ります。

リンクdata-filter='dev-*'がクリックされると、すべての開発が黒くなり、クリックされた開発が赤くなります。adata-filter='system-*'をクリックすると、すべてのシステムが黒くなり、選択されたシステムは選択された dev で赤のままになります。

私が考えた

 var filter = $(this).attr('data-filter');
 var group = filter.split('-')[0];
 var tag = filter.split('-')[1];

データフィルター情報を分割して、それが属するグループがわかるようにします。

しかし、私はそれを考えすぎていると思います。データ型ごとに反復する簡単な方法はありますか?