如何 select 具有多个 class 的元素？

Question

我发现了一个类似的问题，但我的不同。谢谢:)

这是 html

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

我只想获取 class 恰好 "a h" 的所有元素。我试过这些选择器：

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

但它也会接收 "a c h"。

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

Ps。我确实在网上搜索过，但在那里什么也没找到。

Answer 1

要么使用 attribute selector to select the exact value: (example)

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

如果顺序不同，我想你可以 select 两种变化：(example)

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

..或者只是否定 .c 的 class 的元素：(example)

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

Answer 2

如果您只需要具有那些特定 classes 的元素（不管那些 classes 的顺序）：

// 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;
});

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

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

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

相反，如果您只想 select 具有 class a 和 class h 的那些元素，按特定顺序：

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

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

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

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

参考文献：

JavaScript:
- Element.classList.
jQuery:
- filter().

Answer 3

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

这里是fiddle。 https://jsfiddle.net/yrb2m5r1/

如何 select 具有多个 class 的元素？

how do I select an element with multiple class?

jquery

jquery-selectors