セレクタの and条件指定方法

Question

Jqueryでセレクタの指定方法により処理を分けたいのですが、ご相談をさせてください。

以下の2通りに処理を分けたのですが、アドバイスを頂けますでしょうか。
いろいろ調べてみたのですが、classで複数のものが一致するとその反対を見つけることができませんでした。。

宜しくお願い申し上げます。

A
.hoge .piyoのいずれも含まれる要素
BC
.hogeは含まれるが、.piyoは含まれない要素

<div id="wrapper">
　　<div class="hoge piyo"></div><!--A-->
　　<div class="hoge"></div><!--B-->
　　<div class="hoge fuga"></div><!--C-->
</div>

Answer 1

純粋にマッチするセレクタが必要なら、1は.hoge.piyo、2は.hoge:not(.piyo)です。

スペースを入れずにセレクタを並べると、それは「2つのセレクタのどちらも満たすもの」というANDになります。

Comments

[maguzo]

ありがとうございます。無事解決しました。
とても参考になりました。

Answer 2

あえてセレクタのANDではない方法で回答してみます。
こんな方法もあるよという参考情報です。

// .hoge クラスを持つ要素を見つけ、その中から .piyo を持つ要素を絞り込む
$('.hoge').filter('.piyo');

// .hoge クラスを持つ要素を見つけ、その中から .piyo を持つ要素を除外する
$('.hoge').not('.piyo');

ただ、この方法はセレクタをAND条件的に設定して取得するより遅くなる場合がほとんどだと思いますのでこれくらい単純なものの場合実用的ではないです。

Comments

[maguzo]

コメントありがとうございます。
このようなメソッドもJQueryにはあることを初めて知りました。
大変勉強になりました。