我想选择具有两个类a和b的所有元素。
<element class="a b">
因此,只有同时具有这两个类的元素。
当我使用$(“.a,.b”)时,它给了我并集,但我想要交集。
我想选择具有两个类a和b的所有元素。
<element class="a b">
因此,只有同时具有这两个类的元素。
当我使用$(“.a,.b”)时,它给了我并集,但我想要交集。
如果您希望只匹配两个类的元素(交集,如逻辑AND),只需将选择器写在一起,其间不留空格:
$('.a.b')
顺序不相关,因此您也可以交换类:
$('.b.a')
因此,要将ID为a的div元素与类b和c相匹配,您可以编写:
$('div#a.b.c')
(在实践中,您很可能不需要获得特定的ID,而ID或类选择器本身通常就足够了:$(“#a”)。)
对于本案
<element class="a">
<element class="b c">
</element>
</element>
你需要在.a和.b.c之间加一个空格
$('.a .b.c')
$('.a.b,.a.c').css('订单','2px实心黄色');//选择b和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>
您遇到的问题是,您使用的是Group Selector,而您应该使用Multiples选择器!更具体地说,您使用的是$('.a,.b'),而应该使用$('.a.b')。
有关更多信息,请参阅下面组合选择器的不同方法概述!
组选择器:“,”
选择所有<h1>元素和所有<p>元素以及所有<a>元素:
$('h1, p, a')
倍数选择器:“”(无字符)
选择文本类型的所有<input>元素,类代码和红色:
$('input[type="text"].code.red')
下降选择器:“”(空格)
选择<p>元素中的所有<i>元素:
$('p i')
子选择器:“>”
选择作为<li>元素的直接子元素的所有<ul>元素:
$('li > ul')
相邻同级选择器:“+”
选择紧挨在<h2>元素之后的所有<a>元素:
$('h2 + a')
通用同级选择器:“~”
选择所有<div>元素的同级<span>元素:
$('div ~ span')
组选择器
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")
您可以根据需要使用getElementsByClassName()方法。
var elems=document.getElementsByClassName(“a b c”);elems[0].style.color=“绿色”;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>
这也是最快的解决方案。你可以在这里看到一个基准。
代码$(“.a,.b”)将同时适用于以下多个元素
<element class="a">
<element class="b">
如果您想选择同时具有a和b类的元素,如<element class=“a b”>,请使用不带逗号的js
$('.a.b')
下面的示例将向您介绍如何在一行中同时选择多个嵌套类选择器和直接类选择器
//以下是选择器的说明//.a.b.c=选择div a和b内部的嵌套子c//.a.d=选择div a内部的嵌套子d//.f=选择直接元素,即div f,它在div a和b之外$('.a.b.c,.a.d,.f').css('背景颜色','灰色');<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>