How To Select The Element Which Has Not Combinations Of Classes?
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 th
Solution 1:
you can simply use this code..
$('.A.W.B').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 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>
<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>Solution 2:
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>
Post a Comment for "How To Select The Element Which Has Not Combinations Of Classes?"