jQuery에서 여러 클래스가있는 요소를 어떻게 선택할 수 있습니까?

나는 두 개의 클래스가있는 모든 요소를 선택합니다 a및 b.

<element class="a b">

따라서 두 클래스 가 모두 있는 요소 만

내가 그것을 사용할 때 $(".a, .b")노조를 제공하지만 교차로를 원합니다.

두 클래스 (논리적 AND와 같은 교차점)가있는 요소 만 일치 시키려면 사이에 공백없이 선택기를 함께 작성하십시오 .

$('.a.b')

순서는 관련이 없으므로 클래스를 바꿀 수도 있습니다.

$('.b.a')

따라서 클래스 와 divID가 있는 요소 를 일치시키기 위해서는 다음과 같이 작성하십시오.abc

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

실제로는 특정 정보를 얻을 필요가 없으며 ID 또는 클래스 선택기 자체만으로도 충분 $('#a')합니다.

filter()함수를 사용하여이를 수행 할 수 있습니다 .

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

이 경우

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

.a와 사이에 공백을 넣어야합니다..b.c

$('.a .b.c')

당신이 겪고있는 문제는을 사용하고 Group Selector있지만 Multiples selector! 좀 더 구체적으로 말하면 사용하고있는 $('.a, .b')반면을 사용해야합니다 $('.a.b').

자세한 내용은 아래의 선택기를 결합하는 다양한 방법에 대한 개요를 참조하십시오!

그룹 선택기 : ","

모든 <h1>요소와 모든 <p>요소 및 모든 <a>요소를 선택하십시오 .

$('h1, p, a')

배수 선택기 : ""(문자 없음)

클래스 와 함께 다음의 모든 <input>요소를 선택하십시오 .type textcodered

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

후손 선택기 : ""(공백)

<i>요소 내부의 모든 요소를 선택하십시오 <p>.

$('p i')

어린이 선택기 : ">"

<ul>요소의 바로 하위 요소 인 모든 요소를 선택하십시오 <li>.

$('li > ul')

인접 형제 선택기 : "+"

<a>요소 바로 뒤에 배치 된 모든 요소를 선택하십시오 <h2>.

$('h2 + a')

일반 형제 선택기 : "~"

<span>요소의 형제 인 모든 요소를 선택하십시오 <div>.

$('div ~ span')

요소가있는 다른 사례를 언급하십시오.

예 : <div id="title1" class="A B C">

그냥 입력하십시오 : $("div#title1.A.B.C")

바닐라 JavaScript 솔루션 :-

document.querySelectorAll('.a.b')

더 나은 성능을 위해

$('div.a.b')

페이지에있는 모든 HTML 요소를 단계별로 실행하는 대신 div 요소 만 살펴 봅니다.

그룹 선택기

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

당신은 이것을 필요 jQuery로 하지 않습니다

에서 Vanilla당신이 할 수 있습니다 :

document.querySelectorAll('.a.b')

코드 $(".a, .b")는 여러 요소 아래에서 동시에 작동합니다.

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

<element class="a b">쉼표없이 js를 사용하는 것 보다 a와 b 모두 클래스가있는 요소를 선택하려면

$('.a.b')

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>

이것은 또한 가장 빠른 솔루션입니다. 여기 에 대한 벤치 마크를 볼 수 있습니다 .

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