Javascript jQuery-过滤<；李>；具有类属性

我有不同的复选框，它会根据li的类过滤一组~100 li元素

过滤器：

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

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

---

因此，只要单击任何复选框，它就会根据类获取名称和过滤器。然而，这种方法非常慢。有更好的性能建议吗？

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

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

要选择不带类的li元素，请执行以下操作：

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

---

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

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

要选择不带类的li元素，请执行以下操作：

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

---

缓存选择器。您还可以使用

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();
});

---

缓存选择器。您还可以使用

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();
});

---

我最初是这样做的，但我试图隐藏所有没有该属性的li元素。否定了您语句的版本，但不确定是如何实现的。@dbaseman您确定li和：not之间的空格吗？@dbaseman实际上效果很好。必须清除缓存。再次感谢你，我从来都不知道它的存在。我最初是这么做的，但我试图隐藏所有没有该属性的li元素。否定了您语句的版本，但不确定是如何实现的。@dbaseman您确定li和：not之间的空格吗？@dbaseman实际上效果很好。必须清除缓存。再次感谢你，我不知道它的存在。我认为这是最好的解决方案。但是，为什么要使用

$（this）.is（':checked'）

而

这个.checked

就足够了？我认为这是最好的解决方案。但是，为什么要使用

$（this）.is（':checked'）

，而

this.checked

就足够了？