求助：基于HTML与jQuery实现类名与data-class匹配及选项禁用

我手头有这样两组HTML结构：

1. 包含多类div的容器 #

<div class="classes">
 <div class="alpha">...</div>
 <div class="beta">....</div>
 <div class="gamma">.....</div>
 <div class="alpha beta">.....</div>
 <div class="alpha">....</div>
 <div class="beta gamma"></div>
 <div class="alpha beta gamma">.....</div>
 <div class="alpha">....</div>
 ....
</div>

2. 带data-class属性的下拉选择框 #

<select id="classSelect">
 <option value="something" data-class="alpha"></option>
 <option value="something-2" data-class="alpha"></option>
 <option value="something-3" data-class="beta"></option>
 <option value="something-4" data-class="alpha beta"></option>
 <option value="something-4" data-class="beta gamma"></option>
 ...
</select>

我想实现这样的功能逻辑：

• 先找到所有带有alpha类的div元素
• 把这些div的类名和select每个选项的data-class属性值做比对
• 最终禁用或者隐藏那些不包含alpha字符串的选项

我已经理出了大致步骤：

1. 遍历所有带.alpha类的div
2. 获取它们的类名，用jQuery的.filter()方法去匹配选项的data属性

现在写了部分代码，但卡在了.filter()里的逻辑和语法部分：

$('div.alpha').each(function() {
 var $item = $(this);
 var itemClasses = $item.attr('class');
 $('#classSelect option').filter(function() {
 // *** 这里的逻辑和语法搞不定，求提示 ***
 });
});

解决方案&提示 #

其实我们可以先明确核心需求，再调整代码逻辑，不用绕弯路：

情况1：只要选项的data-class包含alpha就保留（最贴合你的需求描述）

如果你的目标只是保留所有data-class里有alpha的选项，禁用其他的，那根本不用遍历每个div——因为你已经只关注带alpha的div，而选项只要包含alpha就符合条件，直接筛选选项即可：

// 先重置所有选项的状态，避免重复操作导致混乱
$('#classSelect option').prop('disabled', false).show();

// 筛选出不包含alpha的选项，禁用它们（或者用.hide()隐藏）
$('#classSelect option').filter(function() {
  // 获取当前选项的data-class值
  const optionClass = $(this).data('class');
  // 返回true的元素会被筛选出来，这里我们找不包含alpha的
  return !optionClass.includes('alpha');
}).prop('disabled', true);

情况2：需要选项的data-class和某个带alpha的div的类名完全匹配

如果你的需求是更严格的完全匹配（比如选项的data-class必须和某个带alpha的div的类名一模一样才保留），那可以先收集所有有效的类名，再筛选：

// 用Set来收集所有带alpha的div的类名，自动去重
const validClassNames = new Set();
$('div.alpha').each(function() {
  validClassNames.add($(this).attr('class'));
});

// 重置选项状态
$('#classSelect option').prop('disabled', false).show();

// 筛选出不在有效集合里的选项，禁用
$('#classSelect option').filter(function() {
  const optionClass = $(this).data('class');
  return !validClassNames.has(optionClass);
}).prop('disabled', true);

关于你原来的代码问题

你之前的代码里遍历每个带alpha的div，然后每次都去筛选所有选项，这会导致重复操作（比如有3个带alpha的div，就会执行3次筛选），效率不高。我们应该先把需要保留的条件整理好，再一次性筛选选项。

核心的.filter()逻辑其实很简单：在回调函数里，返回true意味着当前元素会被筛选出来，然后你就可以对这些筛选出来的元素执行禁用/隐藏操作。

内容的提问来源于stack exchange，提问作者MUTANGA AL SNAFU