In jQuery Select element that has redundant or has two of same class

Question

Say in this example:

<div class='a a'></div>
<div class='a a'></div>
<div class='a'></div>
<div class='a a'></div>
<div class='a a'></div>
<div class='a'></div>
<div class='a a'></div>

In jQuery, how do I select the div elements with two a classes?

I am using the daterangepicker library, just so you know I don't control the rendered tags, and there are elements in the rendered calendar that has two of a same class, I want to select those.

Answer 1

if class value always be like class="a a"then you can make use of attribute selector as shown in below code with div[class="a a"]

$(function(){
   $('div[class="a a"]').addClass('b');
})

.a {
  color: green;
}
.b {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a a'>Double A</div>
<div class='a a'>Double A</div>
<div class='a'>Single A</div>
<div class='a a'>Double A</div>
<div class='a a'>Double A</div>
<div class='a'>Single A</div>
<div class='a a'>Double A</div>

for another case where class may have third class at the start / end / middle then in that case we need to manually calculate the classes

$(function(){
  $('div.a').filter(function(){
     var classVal = $(this).attr('class');
     var classes = classVal.split(" ");
     var count = 0;
     for(var i=0; i<classes.length; i++) {
        if(classes[i] == "a") {
          count++;
        }
     }
     return count==2;
  }).addClass('b');
});

.a {color:  green;}
.b {color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='a a'>Double A</div>
<div class='a a'>Double A</div>
<div class='a'>Single A</div>
<div class='a a'>Double A</div>
<div class='a a'>Double A</div>
<div class='a'>Single A</div>
<div class='a a'>Double A</div>