JSでフィルタリング機能を付ける方法

<!-- ボタンになるリスト -->
<ul id="filterBtnList">
<li id="filterAll" class="all is_active">ALL</li>
<li id="filterRed" class="red">RED</li>
<li id="filterGreen" class="green">GREEN</li>
<li id="filterBlue" class="blue">BLUE</li>
</ul>

<!-- ソートするコンテンツ -->
<ul class="test_list">
<li class="red box">赤1</li>
<li class="green box">緑1</li>
<li class="blue box">青1</li>
<li class="red box">赤2</li>
<li class="green box">緑2</li>
<li class="blue box">青2</li>
<li class="red box">赤3</li>
<li class="green box">緑3</li>
<li class="blue box">青3</li>
　　　<!-- 要素はいくつでも並べられる -->
</ul>

jQuery(function($) {

/* 要素を取得(ボタンと要素) */
var btnList = $('#filterBtnList *'),
btnAll = $('#filterAll'),
btnRed = $('#filterRed'),
btnGreen = $('#filterGreen'),
btnBlue = $('#filterBlue'),
box = $('.box');

/* ボタンのいずれかをクリックした場合 */
btnList.click(function(){
  if(!($(this).hasClass('is_active'))){
     var filterClass = $(this).attr('class');	 
     btnList.removeClass('is_active');
     $(this).addClass('is_active');

     box.each(function() {
        $(this).fadeOut(0);
          if($(this).hasClass(filterClass)){
            $(this).stop().fadeIn(300);
          }else if(filterClass === 'all'){
     	    box.stop().fadeIn(300);		
          }
     });	
  }
});

});

/*ボタンのリスト*/
ul#filterBtnList{
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}
ul#filterBtnList li{
    display: inline-block;
    padding: 5px;
    font-size: 12px;
    border: solid 1px #000;
    cursor: pointer;
}
ul#filterBtnList li:hover{
    background-color: black;
    color: white;
}
ul#filterBtnList li.is_active{
    background-color: black;
    color: white;
}

/*コンテンツのリスト*/
ul.test_list{
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.test_list li{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 5px 5px 0;
    color: #fff;
    font-size: 10px;
    text-align: center;
}
ul.test_list li.red{background-color: #db5858;}
ul.test_list li.green{background-color: #63a94d;}
ul.test_list li.blue{background-color: #4e57cb;}