如何选择没有类别组合的元素? [英] How to select the element which has not combinations of classes?

问题描述

我正在处理以下代码.我如何只隐藏没有mopt[]中指示的类的div?

I am working on the following code. How can I hide only the divs which has not the classes as indicated in the mopt[]?

如您所见，我试图仅显示两个具有Q和M类的div，但是我的代码隐藏了所有divs

As you can see I am trying to show only two divs which has the Q and M classes but my code in hiding all of divs

$('.A.W.B').css("background-color", "red");
let mopt = ['Q','M']
for (i = 0; i < mopt.length; i++) {
   $(".box:not(:has(" + mopt[i] + "))").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>
<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>

推荐答案

您要隐藏的框既没有Q也没有M，因此您可以过滤没有.Q, .M的框，并且隐藏那些.

You're looking to hide boxes that have neither Q nor M, so you can filter on those that do not have .Q, .M, and hide those.

$('.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>
<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>

这篇关于如何选择没有类别组合的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！