jQuery如何筛选同时包含多个指定class类名的div元素

云上老周

2026-9-28

实现方案

你可以直接通过拼接类选择器字符串，或者用jQuery的filter方法配合数组的every判断实现联合筛选，两种实现方式如下：

方式1：拼接联合选择器（最简便）

直接把选中的类名数组拼接成.class1.class2.class3的格式，刚好匹配你需要的同时包含所有类的选择规则：

// 每次筛选前先清空数组，避免上次的选项残留
selectedOptions = [];
$('input[name="filter-input"]:checked').each(function(i){
  selectedOptions.push($(this).val());
});

// 先隐藏所有item
$(".item").hide(); 

if (selectedOptions.length === 0) {
  // 没有选中任何选项时默认展示所有item，可根据需求调整逻辑
  $(".item").show();
} else {
  // 拼接联合选择器，直接筛选同时包含所有选中类的元素
  const targetSelector = '.item.' + selectedOptions.join('.');
  $(targetSelector).show();
}

方式2：用filter方法（灵活度更高）

如果后续需要加额外的筛选规则，可以用jQuery的filter方法配合数组every判断，逻辑更清晰：

// 前面获取选中选项、隐藏所有item的逻辑不变
selectedOptions = [];
$('input[name="filter-input"]:checked').each(function(i){
  selectedOptions.push($(this).val());
});
$(".item").hide(); 

if (selectedOptions.length > 0) {
  $('.item').filter(function() {
    // 只有当前元素包含所有选中的类时，才会被保留并展示
    return selectedOptions.every(className => $(this).hasClass(className));
  }).show();
} else {
  $(".item").show();
}