javascript - 选择具有精确类组合的元素

Question

我已经在这篇文章中以某种方式问过这个问题，但结果表明我正在寻找错误的解决方案！我的错！

如您所见，我正在寻找一种解决方案，仅显示具有数组值组合的 div。例如，在这个演示中，输出将是 3 个 div，如Has Q、Has M和Has Q & M 但我只需要显示Has Q & Mdiv 中包含所有数组元素组合的 div

$('.A.W.B').css("background-color", "red");
let mopt = ['Q','M'];

$('.box').not(
  mopt.map(function(className){ return '.'+ className; }).join(', ')
).hide();

.box {
  height: 20px;
  background: khaki;
  width: 100px;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4> Should Display Only the Div which Has 'Q' <strong>AND </strong> 'M' together</h4>

<div class="box A B F  R W Q">Has Q</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B F W R">No Q</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B F W R M">Has M</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B Q F H  M K F">Has Q & M</div>

<p> but it is displaying all boxes which have part of `mopt` array</p>

标签： javascriptjquery

Answer 1

当用逗号分隔选择器时，它将充当多个选择器，这意味着它们中的每一个都充当一个选择器。将它们组合在一起，没有任何空间。

$('.A.W.B').css("background-color", "red");
let mopt = ['Q','M'];

$('.box').not(
  mopt.map(function(className){ return '.'+ className; }).join('')
).hide();

.box {
  height: 20px;
  background: khaki;
  width: 100px;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4> Should Display Only the Div which Has 'Q' <strong>AND </strong> 'M' together</h4>

<div class="box A B F  R W Q">Has Q</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B F W R">No Q</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B F W R M">Has M</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B Q F H  M K F">Has Q & M</div>

<p> but it is displaying all boxes which have part of `mopt` array</p>

参考 ：

选择元素 | jQuery

简单选择器 | MDN