How to select the element which has not combinations of classes?
Question
I am working on the following code. How can I hide only the divs which has not the classes as indicated in the mopt[] ?
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
$('.AWB').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 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>
2 answers
solution1
1 2019-04-12 18:19:46
you can simply use this code..
$('.AWB').css("background-color", "red"); $(".box").not(".Q,.M").hide();
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> .box { height: 20px; background: khaki; width: 100px; text-align:center; } </style> </head> <body> <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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>
solution2
0 ACCPTED 2019-04-12 18:00:50
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.
$('.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> <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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Selecting Element which Has Exact Combinations of Classes
How do I select a DOM element that has multiple classes?
select element with jquery that has multiple classes
Select sub element based on classes it has
How to select div which has particular element in class?
How to select element which doesn't has Id attribute?
How can I select an element which has only a specific class?
How to select element which is not 'this'?
Select the parent of an element which has a certain class
How can I check a element by class name which has some classes
Related Tags