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

StackOverflow https://stackoverflow.com/questions/1041344

문제

내가 원하는 모든 요소를 선택할 수 있는 두 개의 클래스 a 고 b.

<element class="a b">

그래서만 요소가 모두 클래스입니다.

내가 사용하는 경우 $(".a, .b") 그것은 나에게 union 지만,저는 교차점이 있습니다.

도움이 되었습니까?

해결책

하려는 경우에만 일치 요소 모두 클래스(교차로,같은 논리적이고),그냥 작성하의 선택 함께 없이 공간 사이:

$('.a.b')

순서와 관련이 없다,그래서 당신은 또한 교환의 클래스:

$('.b.a')

그래서 일치하는 div 을 가진 요소의 ID a 클래스 b 고 c, 을 쓰기:

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

(실제로는,당신을 가능성이 높을 받을 필요가 없는 특정,그리고증 또는 클래스를 선택해서 자체는 일반적으로 충분하다: $('#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').

자세한 내용의 개요를 다른 방법으로 결합하는 선택기 herebelow!

그룹 선택:","

모두 선택 <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>

그냥 언급한 다른 케이스 요소:

E.g. <div id="title1" class="A B C">

입력: $("div#title1.A.B.C")

바닐라 JavaScript 해결책:-

document.querySelectorAll('.a.b')

성능 향상을 위해 사용할 수 있는

$('div.a.b')

이 보이는 것을 통해서만 요소를 대신 모든 html 요소에 있는 페이지는 다음과 같습니다.

그룹 선택

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

당신이 사용할 수 있는 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>

이것은 가장 빠른 솔루션도 있습니다.당신이 볼 수 있는 벤치마크에 대해 기.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top