2

jquery でDOM要素をクラス名で指定するとき、クラス名にスペースが含まれているとうまく指定できません

<div class="A B C">
  <p>first</p>
</div>
<div class="A C">
  <p>second</p>
</div>

このようなHTMLをが存在した時

$("div.A.C").html()

と指定しても

<p>first</p>

が帰ってきてしまいます

<p>second</p>

を取得するにはどのようにすればよいのでしょうか?

2 件の回答 2

6
$("div.A.C:not(.B)").html()
6

HTMLのclass属性には、スペースで区切った複数のクラスを指定することができます。

つまり、<div class="A B C"> はA・B・Cの3つのクラス、<div class="A C"> はA・Cの2つのクラスとして解釈されます。クラス「A B C」という意味にはなりません。そしてCSSやjQueryのセレクタ記法で $("div.A.C") と書いた場合、AとBの両方のクラスを持った <div> 要素という意味ですから、<div class="A B C"> <div class="A C"> の両方に該当します。

この場面で <div class="A C"> だけを選択するには、「クラスBを持っていない」という条件も付ける必要があります。それがemasakaさんの書かれている :not(.B) という記述です。

属性全般で使えるセレクタを使えば、スペースも含めてマッチさせることもできますが、class属性の使い方としては適切ではないでしょう。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。