web-dev-qa-db-ja.com

JQueryで複数のクラスを持つ要素を選択する方法

aとbという2つのクラスを持つすべての要素を選択したいです。

<element class="a b">

つまり、 both クラスを持つ要素だけです。

$(".a, .b")を使うとき、それは私に和集合を与えます、しかし、私は交差が欲しいです。

javascriptjquerycss-selectorsjquery-selectors
1906
Mladen

both classes（論理積のような交差）で要素のみを一致させたい場合は、セレクタを一緒に の間にスペースなしで書いてください 

$('.a.b')

順序は関係ありませんので、クラスを交換することもできます。

$('.b.a')

したがって、divというIDを持つa要素をクラスbおよびcと一致させるには、次のように記述します。

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

（実際には、特定のものを取得する必要はほとんどないでしょう。通常、IDまたはクラスセレクタだけで十分です：$('#a')）。

2448
Sasha Chedygov

filter() 関数を使ってこれを行うことができます。

$(".a").filter(".b")
162
Jamie Love

その場合

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

.aと.b.cの間にスペースを入れる必要があります

$('.a .b.c')
112
juanpaulo

あなたが抱えている問題は、あなたがGroup Selectorを使っているべきであるのに対して、あなたはMultiples selectorを使っていることです！もっと具体的に言うと、$('.a, .b')を使っているのに対し、$('.a.b')を使っているはずです。

詳しくは、以下のセレクターを組み合わせるためのさまざまな方法の概要を参照してください。

グループセレクタ： "、"

すべての<h1>要素とすべての<p>要素およびすべての<a>要素を選択します。

$('h1, p, a')

倍数セレクタ： ""（文字なし）

クラスtypeおよびtextを持つ、coderedのすべての<input>要素を選択します。

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

子孫セレクタ： ""（スペース）

<i>要素内のすべての<p>要素を選択します。

$('p i')

子セレクタ： ">"

<ul>要素の直接の子である<li>要素をすべて選択します。

$('li > ul')

隣接兄弟セレクタ： "+"

<a>要素の直後に配置されているすべての<h2>要素を選択します。

$('h2 + a')

一般兄弟セレクタ： "〜"

<span>要素の兄弟であるすべての<div>要素を選択します。

$('div ~ span')
57
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>
36
user2298171

Elementを使った別のケースについて言及するだけです：

例えば。 <div id="title1" class="A B C">

$("div#title1.A.B.C")と入力するだけです。

25
macio.Jun

バニラのJavaScriptソリューション： -

document.querySelectorAll('.a.b')

25
Salman Abbas

より良いパフォーマンスのためにあなたが使うことができる

$('div.a.b')

これはあなたがあなたのページにあるすべてのhtml要素を通して進む代わりにdiv要素を通してだけ見るでしょう。

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

代わりにこれを使う

$(".a.b")
8
Surya R Praveen

これにはjQueryは必要ありません

Vanillaでは、次のことができます。

document.querySelectorAll('.a.b')
3
Sandwell

あなたが望むものに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>

これも最速の解決策です。あなたはそれについてベンチマークを見ることができます ここ 。

1
bahman parsamanesh