Question

给出一个动态生成的类列表：

let dynamicClassList = ".classA, .classB, .classC"; // Contains 0 to N classes

使用:not()选择器，我可以像下面这样轻松构建否定选择器classX && !(classA || classB || classC)：

$(".classX:not(" + dynamicClassList + ")");

但是我不知道如何将肯定选择器classX && (classA || classB || classC)构造为matches() selector doesn't seem compatible with browsers yet：

$(".classX:matches(" + dynamicClassList + ")");

任何人都知道一种使用not()的类似方式来构建快速选择器的方式，而无需“循环”和“ ifs”？

Answer 1

您可以将选择器classX && (classA || classB || classC)转换为(classX && classA) || (classX && classB) || (classX && classC)

以下是CSS选择器：

.classX.classA, .classX.classB, .classX.classC {}

然后，您可以考虑使用一个小的JS代码添加.classX来创建选择器：

let dynamicClassList = ".classA, .classB, .classC";

let selector = dynamicClassList.replace(/,/gi, '.classX, ');
selector=selector+'.classX';

$(selector).css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classA classX">some text</div>
<div class="classB">some text</div>
<div class="classX classB">some text</div>
<div class="classX classB classA">some text</div>
<div class="classB classA">some text</div>
<div class="classX">some text</div>

（X和（A或B或C）选择器的：not（.classA，.classB，.classC）的相反选择器

1 个答案: