jQuery — Фильтрация

с помощью атрибутов класса

У меня есть разные флажки, которые фильтруют по клику набор из ~100 элементов li на основе классов li.

Фильтры:

[ ] Rock Checkbox
[ ] Rap Checkbox
[ ] Punk Checkbox
[ ] Country Checkbox

<li class="rock rap punk">...</li>
<li class="rock country">...</li>

Мой javascript выглядит следующим образом:

$(document).ready(function(){
        $('.filter').click(function() {
            var attribute = this.name;
            if ($(this).is(':checked')) {
                $('#champion-list li').each(function(index) {
                    if(!$(this).hasClass(attribute))
                        $(this).hide();
                });
            } else {
                $('#champion-list li').each(function(index) {
                    if(!$(this).hasClass(attribute))
                        $(this).show();
                });
            }
        });
    });

Таким образом, при щелчке любого флажка он захватывает имя и фильтрует на основе класса. Однако этот метод очень медленный. Есть лучшие идеи по повышению производительности?