Question

我发现了一个类似的问题，但我的不同。感谢：）

这是html

<div class="a c h">I'm here1</div>
<div class="a h">I'm here2</div>

我只想获得类完全“a h”的所有元素。我试过这些选择器：

$(".a.h")
$(".a.h").not("[class='c']")

但它也会获得“a c h”。

有什么想法可以做到吗？非常感谢。

聚苯乙烯。我确实在网上搜索但没有找到任何内容。

Answer 1

$(".a.h").not('.c');

这是小提琴。 https://jsfiddle.net/yrb2m5r1/

Answer 2

使用attribute selector选择确切的值：(example)

$('[class="a h"]')

如果订单不一，我猜您可以选择两种变体：(example)

$('[class="a h"], [class="h a"]')

..或者只是使用.c：(example)

类来否定元素

$(".a.h:not(.c)")

Answer 3

如果您只想要具有这些特定类的元素（无论这些类的顺序如何）：

// selects all elements with a class of 'a' and 'h':
$('.a.h').filter(function(){
    // keeps only those elements with only two classes
    // (to avoid having to hard-code the classes that you
    // don't want to 'accidentally' select):
    return this.classList.length === 2;
});

＆＃13;

$('.a.h').filter(function() {
  return this.classList.length === 2;
}).css('color', 'red');

＆＃13;

div::before {
  content: attr(class);
}
div {
  border: 1px solid #000;
  margin: 0 0 0.5em 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a c h"></div>
<div class="a h"></div>
<div class="h a"></div>
<div class="a m h"></div>

＆＃13;

相反，如果您只想按特定顺序选择类a和类h的元素：

$('.a.h').filter(function () {
    return this.className === 'a h';
});

＆＃13;

$('.a.h').filter(function() {
  return this.className === 'a h';
}).css('color', 'red');

＆＃13;

div::before {
  content: attr(class);
}
div {
  border: 1px solid #000;
  margin: 0 0 0.5em 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a c h"></div>
<div class="a h"></div>
<div class="h a"></div>
<div class="a m h"></div>

＆＃13;

参考文献：

JavaScript的：
- Element.classList。
jQuery的：
- filter()。

如何选择具有多个类的元素？

3 个答案: