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

问题

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.

回答1:

You should count the occurrences of classes to get exactly the item as you wish like below.

$(".a").filter(function(){
  var classes = $(this).attr("class").split(/\s+/);
  var countClassA = classes.filter(c => c === "a").length;
  return countClassA > 1;
}).addClass('selected');

div{
   padding: 5px;
}

.selected{
  color: red;
}

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

回答2:

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>

回答3:

Is this solve your problem? it's only select the div with double a class name:

$('div').each(function() {
  if ($(this).attr('class') == 'a a') {
    $(this).addClass('active')
  }
});

.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a a b'>a a b</div>
<div class='a a'>a a</div>
<div class='a'>a</div>
<div class='a a c'>a a c</div>
<div class='a a d'>a a d</div>
<div class='a'>a</div>
<div class='a a e'>a a e</div>

回答4:

You can get the class attribute and see if it contains multiple a classes:

$(".a").on("click", function() {
  const classes = $(this).attr('class');
  const count = classes.split(/\ba\b/).length - 1;
  if (count === 2) {
    console.log('A A !!!');
  }
});

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

来源：https://stackoverflow.com/questions/60034906/in-jquery-select-element-that-has-redundant-or-has-two-of-same-class

标签

jquery

daterangepicker