22513


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

[code]

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

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

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

と指定しても

`<p>first</p>`

が帰ってきてしまいます

`<p>second</p>`

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


CC BY-SA 3.0
2016-02-25T05:53:43.480
22510
2016-02-25T14:56:27.880
2016-02-25T06:04:23.570
5505
5505
question
jquery
スペースを含んだクラス名を jquery で指定できない

[code]

    $("div.A.C:not(.B)").html()
    
[/code]


CC BY-SA 3.0
2016-02-25T06:27:49.977
22513
2016-02-25T06:27:49.977
4010
22510
answer


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属性の使い方としては適切ではないでしょう。


CC BY-SA 3.0
2016-02-25T14:56:27.880
22542
2016-02-25T14:56:27.880
8000
22510
answer