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

Question

我要选择所有具有两个类的元素a和b.

<element class="a b">

所以,只有具有两个类的元素.

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

Answer 1

如果你只想匹配两个类的元素(一个交集,就像逻辑AND),只需将选择器写在一起,两者之间没有空格:

$('.a.b')

订单不相关,因此您也可以交换类:

$('.b.a')

所以对比赛div有一个ID元素a与类b和c,你可以这样写:

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

(实际上,你很可能不需要特定的,并且ID或类选择器本身就足够了$('#a').)

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

子选择器:">"

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

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

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

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

Answer 7

Vanilla JavaScript解决方案: -

document.querySelectorAll('.a.b')

Answer 8

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

$('div.a.b')

这将仅通过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

你不需要jQuery这个

在Vanilla你可以做：

document.querySelectorAll('.a.b')

Answer 11

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

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

如果你想选择具有 a 和 b 两个类的元素，而<element class="a b">不是使用没有昏迷的 js

$('.a.b')