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

질문자 :Mladen

a 와 b 가 있는 모든 요소를 선택하고 싶습니다.

 <element class="ab">

따라서 두 클래스가 모두 있는 요소만 사용합니다.

$(".a, .b") 를 사용하면 합집합이 제공되지만 교차점을 원합니다.

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

 $('.a.b')

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

 $('.b.a')

그래서 맞게 div 의 ID가 요소 클래스와 a b 와 c , 당신이 쓰는 것을 :

 $('div#abc')

(실제로는 그렇게 구체적으로 얻을 필요가 없으며 일반적으로 ID 또는 클래스 선택자 자체로 충분합니다: $('#a') .)

Sasha Chedygov

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

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

Jamie Love

케이스의 경우

 <element class="a"> <element class="bc"> </element> </element>

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

 $('.a .b.c')

juanpaulo

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

자세한 내용은 아래에서 선택기를 결합하는 다양한 방법에 대한 개요를 참조하세요.

---

그룹 선택기 : ","

모든 <h1> 요소 및 모든 <p> 요소 및 모든 <a> 요소 선택:

 $('h1, p, a')

다중 선택기: ""(문자 없음)

code 및 red 클래스가 있는 text type <input> 요소를 선택합니다.

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

하위 선택기: " "(공백)

<p> 요소 내부의 모든 <i>

 $('p i')

하위 선택기 : ">"

<li> 요소의 직계 자식인 <ul> 요소를 선택합니다.

 $('li > ul')

인접 형제 선택자: "+"

<h2> 요소 바로 뒤에 있는 <a> 요소를 선택합니다.

 $('h2 + a')

일반 형제 선택자: "~"

<div> 요소의 형제인 <span> 요소를 선택합니다.

 $('div ~ span')

John Slegers

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

user2298171

요소가 있는 다른 경우를 언급하십시오.

예: <div id="title1" class="ABC">

그냥 입력: $("div#title1.ABC")

macio.Jun

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

document.querySelectorAll('.a.b')

Salman von Abbas

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

 $('div.a.b')

이것은 페이지에 있는 모든 html 요소를 단계별로 살펴보는 대신 div 요소를 통해서만 볼 것입니다.

Tejas Shah

그룹 선택기

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

대신 이것을 사용

 $(".ab")

Surya R Praveen

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

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

<element class="ab"> 와 같이 a와 b가 모두 있는 요소를 선택하려면 코마 없이 js를 사용하는 것보다

 $('.a.b')

Savan

이를 위해 jQuery 가 필요하지 않습니다.

Vanilla 에서는 다음을 수행할 수 있습니다.

 document.querySelectorAll('.a.b')

Sandwell

원하는 것에 getElementsByClassName() 메소드를 사용할 수 있습니다.

 var elems = document.getElementsByClassName("abc"); elems[0].style.color = "green"; console.log(elems[0]);

 <ul> <li class="a">a</li> <li class="ab">a, b</li> <li class="abc">a, b, c</li> </ul>

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

bahman parsamanesh

아래 예제는 한 줄에서 여러 중첩 클래스 선택기와 직접 클래스 선택기를 선택하는 방법에 대한 아이디어를 제공합니다.

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

Gauri Bhosle

var 요소 = document.querySelector(".ab");

Karim Ali

출처 : http:www.stackoverflow.com/questions/1041344/how-can-i-select-an-element-with-multiple-classes-in-jquery