jQuery: Select Iterated elements with class A-i and B-i only when all A-i also have B-i, or don't select any at all

Question

The code below has three rows of divs.

Using jQuery, how would I search through each row for A-# and B-#, making changes only to divs within rows with matching elements (in this case, only row 2 divs).

 .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>