如何選擇沒有類別組合的元素？
[英]How to select the element which has not combinations of classes?
問題描述
我正在研究以下代碼。 如何僅隱藏不具有mopt[]指示的類的div？
如您所見，我試圖僅顯示兩個具有Q和M類的div，但我的代碼隱藏了所有div
$('.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 個解決方案
解決方案1
1 2019-04-12 18:19:46
您可以簡單地使用此代碼。
$('.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>
解決方案2
0 已采納 2019-04-12 18:00:50
您正在尋找隱藏既沒有Q也沒有M框，因此您可以過濾沒有.Q, .M框並隱藏它們。
$('.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>
選擇具有完全類的組合的元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.