jQuery에서 클래스가 여러 개인 요소를 선택하려면 어떻게 해야 합니까?

jQuery에서 클래스가 여러 개인 요소를 선택하려면 어떻게 해야 합니까?

는 두 .a그리고.b.

<element class="a b">

따라서 두 클래스를 모두 가진 요소만 사용할 수 있습니다.

를 할 때$(".a, .b")내게 유니온을 주지만 교차로를 원합니다.

두 클래스(논리 AND와 같은 교차점)를 모두 가진 요소만 일치시키려면 다음 사이에 공백 없이 셀렉터를 함께 작성합니다.

$('.a.b')

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

$('.b.a')

일치시키려면div가 가 다 음 같 요은인 a가 있는b그리고.c당신은 다음과 같이 적을 것입니다.

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

실제로는 이를 구체적으로 파악할 필요가 없으며 ID 또는 클래스 선택기만으로도 충분합니다.$('#a').)

다음 기능을 사용하여 이 작업을 수행할 수 있습니다.

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

경우를 위하여

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

당신은 그 사이에 공간을 넣어야 합니다..a그리고..b.c

$('.a .b.c')

당신이 가지고 있는 문제는, 당신이 사용하고 있다는 것입니다.Group Selector은 면에를당합니다야사해용은신반▁a▁you합▁be다니▁whereas▁using▁should야를 사용해야 합니다.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')

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

요소가 포함된 다른 사례를 언급하십시오.

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

같이 합니다.$("div#title1.A.B.C")

바닐라 자바스크립트 솔루션:-

document.querySelectorAll('.a.b')

더 나은 성능을 위해 사용할 수 있습니다.

$('div.a.b')

이것은 당신의 페이지에 있는 모든 html 요소들을 훑어보는 대신 div 요소들만 살펴볼 것입니다.

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

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

가진 , 예를 들어, a와 b의 클래스를 모두 가진 를 선택합니다.<element class="a b"> 없이 를 사용하는 보다 js를 사용하는 것이 더 .

$('.a.b')

그룹 선택기

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

아래 예제에서는 한 줄에 여러 개의 중첩 클래스 선택기와 직접 클래스 선택기를 동시에 선택하는 방법에 대해 설명합니다.

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

사용할 수 있습니다.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>

이것이 가장 빠른 해결책이기도 합니다.여기서 그것에 대한 벤치마크를 볼 수 있습니다.

varem = 문서입니다.선택기(.a.b")를 쿼리합니다.

언급URL : https://stackoverflow.com/questions/1041344/how-can-i-select-an-element-with-multiple-classes-in-jquery