Selecting Element which Has Exact Combinations of Classes

Question

I already asked this question, somehow at this post but it comes out I was looking for wrong solution! My Bad!

As you can see I am looking for a solution to ONLY display the divs which has the combination of the array values. At this demo for example the output will be 3 divs as Has Q , Has M , and Has Q & M BUT I need to only display the Has Q & M which has all combination of array elements in the div

 $('.AWB').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 ABFRWQ">Has Q</div> <div class="box ABFHKF">No Q</div> <div class="box ABFWR">No Q</div> <div class="box ABFHKF">No Q</div> <div class="box ABFWRM">Has M</div> <div class="box ABFHKF">No Q</div> <div class="box ABQFHMKF">Has Q & M</div> <p> but it is displaying all boxes which have part of `mopt` array</p> 

Answer 1

When separating selectors with comma it will act as a multiple selectors means each of them acts as a selector. To combine together concatenate them without any space.

 $('.AWB').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 ABFRWQ">Has Q</div> <div class="box ABFHKF">No Q</div> <div class="box ABFWR">No Q</div> <div class="box ABFHKF">No Q</div> <div class="box ABFWRM">Has M</div> <div class="box ABFHKF">No Q</div> <div class="box ABQFHMKF">Has Q & M</div> <p> but it is displaying all boxes which have part of `mopt` array</p> 

Refer :

Selecting Elements | JQuery

Simple Selectors | MDN

Answer 2

The way selectors work, is that you need to use the class name connected with a . in order to include multiple classes. So, for this example you would need .QM .

You can accomplish this with

'.' + mopt.join('.')

As seen below

 $('.AWB').css("background-color", "red"); let mopt = ['Q','M']; $('.box').not( '.' + mopt.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 ABFRWQ">Has Q</div> <div class="box ABFHKF">No Q</div> <div class="box ABFWR">No Q</div> <div class="box ABFHKF">No Q</div> <div class="box ABFWRM">Has M</div> <div class="box ABFHKF">No Q</div> <div class="box ABQFHMKF">Has Q & M</div> <p> but it is displaying all boxes which have part of `mopt` array</p>