在jQuery中选择具有冗余或两个相同类的元素

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中，如何选择具有两个标签的

元素？

我正在使用daterangepicker库，只是让您知道我无法控制渲染的标签，并且在已渲染的日历中有一些具有相同类的元素，我想选择那些元素。

- Ricardo Green

---

同样的问题？？https://stackoverflow.com/questions/60034736/select-element-that-has-two-of-same-class-name-or-has-redundant-class-in-jquery - Nguyễn Văn Phong

@BhushanKawadkar 是的，类会改变，不仅限于 a a。 - Ricardo Green

好的，我已经提供了两种可能的答案，但对于我的第二个答案，你应该使用由technophyle和Phong提供的正则表达式。 - Bhushan Kawadkar

@RicardoGreen 好的，我看到了，很有趣，为什么作者这样做！无论如何，现在你想选择哪一个？off ends还是off disabled或其他什么？ - Pedram

@Pedram，这个问题已经被Phong和Bhushan Kawadkar的答案解决了。虽然感谢您的有益输入。 - Ricardo Green

Answer 1

如果类的值总是像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>

- Bhushan Kawadkar

---

如果类的格式与 a a 不同，那么这是不正确的。请在此处检查我的答案 https://dev59.com/kbnoa4cB1Zd3GeqPIgSq#60035079 - Nguyễn Văn Phong

这就是为什么我问OP是否是这种情况...如果类永远是a a，那么我发布的内容就是最佳方法，但如果在中间或结尾或开头还有另一个类，则需要计算类的出现次数。 - Bhushan Kawadkar

是的，我也这么认为，先生。 - Nguyễn Văn Phong

对我来说，这个答案是最接近的之一，特别是它选择并返回了我想要的元素。如果第二个答案比@Phong更早回答就好了。感谢Bhushan Kawadkar的回答和耐心。我会选择Phongs作为最接近的答案。虽然如此，这个答案还是值得点赞的。 - Ricardo Green

很高兴能帮助你 :) - Bhushan Kawadkar

Answer 2

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

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

- Nguyễn Văn Phong

---

嘿，谢谢您的回答，但这并不能解决我的问题。我的实际情况是有很多个 td 元素，抱歉没有说明清楚。我更新了问题以更具体地描述。 - Ricardo Green

我刚刚更新了我的答案，请看一下 @Ricardo Green - Nguyễn Văn Phong

Phong先生，请问您能否更新代码，让它返回并给所选元素添加一个类别，类似于 b 的那种？只要实现了这个功能，我就会将其选择作为最佳答案。 - Ricardo Green

更新了，请查看 @Ricardo Green - Nguyễn Văn Phong

太棒了，先生。我确认这个在我正在处理的项目中起作用，并且解决了问题。谢谢大家。 - Ricardo Green

Answer 3

您可以获取类属性并查看它是否包含多个a类：

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

- technophyle

---

这不仅是我的想法和代码相同，而且还有些不正确的微调 :) split返回一个项数组，所以你的答案是不正确的。 - Nguyễn Văn Phong

为什么要踩它？能否解释一下问题在哪里？ - technophyle

Answer 4

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>

- Pedram