从不同列表中匹配相同的字符串

Question

我有一个HTML结构，包括：

A)具有如下类的N-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>

( B)包含数据属性的N个选项填充的select，如下所示：

<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>

我想达致以下的机制：

A)找到所有有class="alpha"的div

B)将divs字符串'alpha‘与每个包含'alpha’的数据属性的select选项进行比较。

C)禁用或隐藏不包含字符串的选项。

到目前为止，我认为我需要: 1)使用.alpha遍历每个div，2)获取它们的类，使用.filter()将字符串与所有选项的数据属性匹配。

$('div.alpha').each(function() {
    var $item = $(this);
    var itemClasses = $item.attr('class');    
    $('#classSelect option').filter(function() { 
       *** CANT FIGURE OUT THIS PART ***
    });  
});

但我不明白步骤B的逻辑或语法(主要是)。

过滤后的输出应该如下所示：

<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" disabled></option>
    <option value="something-4" data-class="alpha beta"></option>
    <option value="something-4" data-class="beta gamma" disabled></option>
    ...
</select>

<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>

有人能给我个提示吗？谢谢您抽时间见我

Answer 1

要选择所有不包含字符串的data-class选项(在您的例子中是'alpha‘)，只需这样做。(这只能用css来完成，但我想您的最终代码会更复杂，这就是您想使用jQuery的原因)。这也可以用普通的javaScript来完成。

不知道为什么要选择div的第一个。也许我没有正确理解你的要求。

​

var options = $("#classSelect option")

$(options).each(function() {
	var dataClass = $(this).data('class')
  if ( !dataClass.includes('alpha')) {
  	$(this).attr('disabled', true) // or hide() if you want to remove them
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classes">
   <div class="alpha">alpha</div>
   <div class="beta">beta</div>
   <div class="gamma">gamma</div>
   <div class="alpha beta">alpha beta</div>
   <div class="alpha">alpha</div>
   <div class="beta gamma">beta gamma</div>
   <div class="alpha beta gamma">alpha beta gamma</div>
   <div class="alpha">alpha</div>
</div>

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

​

或者您可以这样做(如果您不需要遍历选项，因为其他原因)

$("#classSelect option").not("[data-class*='alpha']").attr('disabled',true)