Question

我想选择包含两个类a和b的所有元素。

<element class="a b">

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

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

Answer 1

如果您只想匹配两个类（交叉点，如逻辑AND）的元素，只需将选择器一起写入，不含空格：

$('.a.b')

订单不相关，因此您也可以交换类：

$('.b.a')

为了匹配ID为div的{{1}}元素与类a和b，您需要写一下：

（实际上，你很可能不需要那么具体，而且ID或类选择器本身就足够了：$('div#a.b.c')。）

Answer 2

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

$(".a").filter(".b")

Answer 3

案例

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

您需要在.a和.b.c

之间加一个空格

$('.a .b.c')

Answer 4

您遇到的问题是，您使用的是Group Selector，而您应该使用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')

子选择器：“＆gt;”

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

$('li > ul')

相邻的兄弟选择器：“+”

选择紧接<a>元素后面的所有<h2>元素：

$('h2 + a')

一般同级选择器：“〜”

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

$('div ~ span')

Answer 5

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

Answer 6

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

E.g。 <div id="title1" class="A B C">

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

Answer 7

Vanilla JavaScript解决方案： -

document.querySelectorAll('.a.b')

Answer 8

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

Project Settings

这只会通过div元素进行查看，而不是单步执行页面上的所有html元素。

Answer 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")

Answer 10

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

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

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

$('.a.b')

Answer 11

此

您不需要jQuery

在Vanilla中你可以这样做：

document.querySelectorAll('.a.b')

Answer 12

您可以根据需要使用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>

这也是最快的解决方案。您可以看到有关该here的基准。

Answer 13

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

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

Answer 14

var elem = document.querySelector（“。a.b”）;

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

14 个答案: