Question

我有一个包含不同类的元素列表：

<div class="class-a class-b class-c class-d"></div>
<div class="class-a class-c"></div>
<div class="class-b class-c class-f"></div>
so on and so forth

我也有这样的数组：

classArray = ["class-a", "class-b", "class-f"]

我想要做的是循环并隐藏没有在数组中列出的类的div。我有这样的代码，如果数组中只有一个类，但是如果我添加更多，它只找到最后一个并使用它。

for(var i = 0, c = classArray.length; i < c; i++) {
            $lesson.each(function() {
                if (!$(this).hasClass('' + classArray[i] + '')) {
                    $(this).removeClass('active');
                } else {
                    $(this).addClass('active');
                }
            });
        }

Answer 1

您可以通过将类加在一起来将数组用作选择器

var classArray = ["class-a", "class-b", "class-f"];

$('div').removeClass('active')
        .filter('.' + classArray.join(', .'))
        .addClass('active')

.active {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class-a class-b class-c class-d">1</div>
<div class="class-a class-c">2</div>
<div class="class-b class-c class-f">3</div>
<div class="class-e">4</div>

另一种方法是在循环中使用toggleClass或使用回调，例如

$('div').each( (_, el) => {
    $(el).toggleClass('active', $(el).is('.' + classArray.join(', .')));
});

将列表与jquery中的数组进行比较

1 个答案: