2189

我想选择所有具有两个类a和b.

<element class="a b">

因此，只有具有这两个类的元素。

当我使用$(".a, .b")它时，它给了我联合，但我想要交叉点。

4

14 回答 14

2787

如果您只想匹配两个类的元素（交集，如逻辑 AND），只需将选择器写在一起，中间不带空格：

$('.a.b')

顺序不相关，因此您也可以交换类：

$('.b.a')

因此，要匹配ID 为with classes and的div元素，您可以编写：abc

$('div#a.b.c')

（在实践中，您很可能不需要得到那个特定的，一个 ID 或类选择器本身通常就足够了：$('#a')。）

于 2009-06-24T22:30:43.800 回答
179

您可以使用以下filter()功能执行此操作：

$(".a").filter(".b")
于 2009-06-24T22:34:38.503 回答
132

对于案件

<element class="a">
  <element class="b c">
  </element>
</element>

你需要在两者之间放置一个.a空格.b.c

$('.a .b.c')
于 2013-03-25T20:31:05.347 回答
70

您遇到的问题是您正在使用 a Group Selector，而您应该使用 a Multiples selector！更具体地说，您正在使用$('.a, .b')，而您应该使用$('.a.b').

有关更多信息，请参阅下面组合选择器的不同方法的概述！

组选择器：“，”

选择所有<h1>元素和所有<p>元素和所有<a>元素：

$('h1, p, a')

倍数选择器：“”（无字符）

选择 的所有<input>元素type text，包括类code和red：

$('input[type="text"].code.red')

后代选择器：“”（空格）

选择<i>元素内的所有<p>元素：

$('p i')

子选择器：">"

选择一个元素的所有<ul>直接子<li>元素：

$('li > ul')

相邻兄弟选择器：“+”

选择<a>紧跟在元素之后的所有<h2>元素：

$('h2 + a')

通用兄弟选择器：“~”

选择所有<span>元素的兄弟<div>元素：

$('div ~ span')
于 2016-01-20T22:24:46.113 回答
40 

$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a">a
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

于 2013-04-19T07:19:21.530 回答
25

只需提及另一个带有元素的案例：

例如<div id="title1" class="A B C">

只需输入：$("div#title1.A.B.C")

于 2012-12-14T16:15:11.730 回答
25

香草 JavaScript 解决方案：-

document.querySelectorAll('.a.b')

于 2015-01-29T18:02:58.243 回答
21

为了获得更好的性能，您可以使用

$('div.a.b')

这将只查看 div 元素，而不是逐步查看页面上的所有 html 元素。

于 2015-09-28T05:26:30.913 回答
9

组选择器

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

变成这样：

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

因此，在您的情况下，您尝试了组选择器，而它是一个交集

$(".a, .b")

而是使用这个

$(".a.b")
于 2017-05-17T13:57:26.590 回答
9

您的代码$(".a, .b")将适用于以下多个元素（同时）

<element class="a">
<element class="b">

如果您想选择具有 a 和 b 类的元素，而<element class="a b">不是使用不带逗号的 js

$('.a.b')
于 2019-10-10T08:05:11.670 回答
4

你不需要jQuery这个

你Vanilla可以这样做：

document.querySelectorAll('.a.b')
于 2018-04-04T08:00:13.047 回答
2

你可以使用getElementsByClassName()你想要的方法。

var elems = document.getElementsByClassName("a b c");
elems[0].style.color = "green";
console.log(elems[0]);
<ul>
  <li class="a">a</li>
  <li class="a b">a, b</li>
  <li class="a b c">a, b, c</li>
</ul>

这也是最快的解决方案。你可以在这里看到一个基准。

于 2018-08-01T10:41:07.047 回答
2

下面的示例将让您了解一次选择多个嵌套类选择器和一行中的直接类选择器

//Here is Explaination of Selectors  
//.a .b .c  = selects nested child c which is inside of div a and b
//.a .d     = selects nested child d which is inside of div a 
//.f        = selects direct element ie div f which is outside of div a and b
$('.a .b .c , .a .d, .f').css('background-color', 'grey');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a">a
  <div class="b">b
       <div class="c">c</div>
  </div> 
  <div class="d">d</div>
</div>
<div class="e">e</div>
<div class="f">f</div>

于 2021-05-02T15:09:00.690 回答
1

var elem = document.querySelector(".ab");

于 2019-10-04T17:16:26.333 回答