在 jQuery Select 元素中有冗余或有两个相同的 class

Question

在这个例子中说：

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

在 jQuery 中，我如何 select 具有两个 a class 的 div 元素？

我正在使用 daterangepicker 库，所以你知道我不控制呈现的标签，并且呈现的日历中有两个相同的元素 class，我想要select那些。

Answer 1

您应该计算类的出现次数以准确获得您想要的项目，如下所示。

$(".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>

Answer 2

如果 class 值总是像 class="a a" 那么您可以使用属性选择器，如下面代码所示 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>

对于另一种情况 class 可能在开始/结束/中间有第三个 class 那么在这种情况下我们需要手动计算 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>

Answer 3

可以获取class属性，看是否包含多个aclasses:

$(".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>

Answer 4

这是否解决了您的问题？只是 select div 和双 class 名字：

$('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>

在 jQuery Select 元素中有冗余或有两个相同的 class

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

jquery

daterangepicker