比較列表數組中的jQuery

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