jQuery: Select 具有 class Ai 和 Bi 的迭代元素仅当所有 Ai 也具有 Bi 时，或在所有 Ai 中都没有 Z99939482F0840EFCF81

Question

下面的代码有三行 div。

使用 jQuery，我将如何在每一行中搜索 A-# 和 B-#，仅对具有匹配元素的行中的 div 进行更改（在这种情况下，只有第 2 行 div）。

 .A-0 { width: 33.33%; height: 49px; }.A-1 { width: 50%; height: 49px; }.A-2 { width: 33.33%; height: 49px; }

 /* row 1 */ <div class="A-0 B-0"></div> <div class="A-0"></div> <div class="A-0 B-0"></div> /* row 2 */ <div class="A-1 B-1"></div> <div class="A-1 B-1"></div> /* row 3 */ <div class="A-2"></div> <div class="A-2 B-2"></div> <div class="A-2 B-2"></div>

Answer 1

 $('div').each(function(index, value) { //for each div var classes = $(this).attr("class").split(/\s+/); //extract classes for curent var class1 = classes[0]; //class1 = A-# var class2 = classes[1]; //class2 = B-# var numeEl = $('div.' + class1).length; //Number off elements with class1 A-# var numeEl2 = $('div.' + class1 + '.' + class2).length; //Number off elements with class1 A-# AND class2 B-# $('div.' + class1).each(function(index, value) { //for each element div with class: A-# if (numeEl === numeEl2) { //if number of elements is matching $(this).css("color", "red") //do something } }); });

 .A-0 { width: 33.33%; }.A-1 { width: 50%; }.A-2 { width: 33.33%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <br> <div class="A-0 B-0">A-0 B-0</div> <div class="A-0">A-0</div> <div class="A-0 B-0">A-0 B-0</div> <br> <div class="A-1 B-1">A-1 B-1</div> <div class="A-1 B-1">A-1 B-1</div> <br> <div class="A-2">A-2</div> <div class="A-2 B-2">A-2 B-2</div> <div class="A-2 B-2">A-2 B-2</div>