javascript - jQuery - 过滤具有类属性

Question

我有不同的复选框，onclick 根据 li 的类过滤一组 ~100 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();
                });
            }
        });
    });

因此，单击任何复选框，它都会根据类获取名称和过滤器。但是，这种方法非常缓慢。有更好的性能想法吗？

Answer 1

选择器是一个字符串，因此您可以动态构造它：

$("#champion-list li." + attribute).hide();

要选择没有类的li元素：

$("#champion-list li :not(." + attribute + ")").hide();

Answer 2

$(function(){

    //cache the list for context
    var list = $('#champion-list')

    //use ".on()" to attach a single handler to the parent
    //onchange, i think, is better since there are keyboard users
    $('filter_parent_container').on('change','.filter',function() {

        var attribute = this.name;

        //directly use the attribute instead of using hasClass()
        if (this.checked) {
            $("li." + attribute,list).hide();
        } else {
            $("li." + attribute,list).show();
        }

    });
});

Answer 3

缓存你的选择器。您也可以使用filter()代替each()并在那里获得一些性能：

var $items = $('#champion-list li');
$('.filter').change(function () {
    var that = this,
        $itemsAtt = $items.filter(function () {
            return !$(this).hasClass(that.name);
        });
    $(this).is(':checked') ? $itemsAtt.hide() : $itemsAtt.show();
});