and条件とor条件を使って jQueryでclassを操作したい

Question

###前提・実現したいこと

a、b、c、d、・・・というそれぞれ複数のclassを持った要素があり、
「e01」というクラス名を持ち、かつ『「e03」もしくは「e04」もしくは「e05」』というクラス名を持つ要素のみ消したい

###該当のソースコード

$((".e01") && (".e03" , ".e04" , ".e05")).css("display","none");

###試したこと

「e01」 and 「(e03)or(e04)or(e05)」
このようにコードを書いたつもりなのですが、実現したい結果が得られません。
原因をご教授いただければ助かります。

少し補足させていただきます。本当は下記のようなコードが書きたいのですが、パターンを全て書くと掛け算式に行数が増えていってしまいます。「andの中にorを書く」というような概念があればご教授いただきたいです。
$((".e01 , .e02") + (".e03 , .e04 , .e05") + (".e06 , .e07 , .e08 , .e09") + ・・・・).css("display","inline-block");

Comments

[think49]

「adnの中にorを書く」という事ですが、"abn" とは何でしょうか。

[take4]

すみません。"and"の間違いでした。訂正をさせていただきました。

Answer 1

$(".e03,.e04,.e05").filter(".e01").css("display","none");
これでもできそう。

Comments

[take4]

filterというのは素晴らしいですね。不要な要素を削除してくれるのですね。
以下の書き方でほぼ実現したい結果を得ることができました。
$("ここに全てのor条件").filter("ここにその他のand条件").css("display","none");

当方の知識がやや追いつかないため、なぜ実現したのか、はっきりとわからないですがこの方法で実装できそうです。ありがとうございます。ベストアンサーに選ばせていただきたいのですが、当方が理解するまでを少々お時間を下さいm(__)m。

[kei344]

jQueryのセレクタについて、aKusanoさんがおっしゃられているように論理演算子の&&とか||とかを使うことは出来ません。jQuery()の括弧の中には基本的にセレクタを記入してHTMLの各要素を取り出す事に使用しますが、そこの記法はCSSとほぼ一緒だと考えておけばわかりやすいと思います。
filter関数はjQuery()で選択した各要素を、さらにもう一度絞り込むための関数です。そしてその指定にも同じくセレクタを使用します。

【jQeryの基本まとめ - CSSセレクタを使おう - - Qiita】
[http://qiita.com/_upto_me_/items/31429332e0415548a9f8](http://qiita.com/_upto_me_/items/31429332e0415548a9f8)

[kei344]

> 「andの中にorを書く」というような概念があれば
いったん jQuery で要素を扱う場合は「AND/OR」という概念は忘れたほうがいいような。あくまでセレクタなので。

書かれているような動きでいうなら、こうも書けます。
jQuery('.a,.b').filter('.c,.d').filter('.e,.f').css('color','red');
これはAND/ORではなく、
(documentから) '.a,.b' のセレクタで表現できるものを集める
⇒ 集めたものから '.c,.d' のセレクタで表現できるものを集める
⇒ 集めたものから '.e,.f' のセレクタで表現できるものを集める
⇒ 集めたものにCSSを適用する
ということです。

あと、追加で質問するのではなく、新たに質問されるほうがいいと思います。

Answer 2

条件が複雑なら複雑な条件のセレクタ文字列を生成する関数を作ってみてはどうでしょうか。

'use strict';
function joinSelectors (classSelector, classSelectors) {
  var selectorTexts = [],
      i = 0,
      l = classSelectors.length;

  classSelector = String(classSelector);

  while (i < l) {
    selectorTexts.push(classSelector + String(classSelectors[i++]));
  }

  return selectorTexts.join();
}

console.log(joinSelectors('.e01', ['.e03', '.e04', '.e05'])); // ".e01.e03,.e01.e04,.e01.e05"

Re: take4 さん

Comments

[take4]

ありがとうございます。お恥ずかしながらご教授いただいたソースコードが私にとって高等すぎまして、理解するのに2日はかかりそうです。
本来であればこういう方法が最もスマートなんだろうと思いますが、当方の能力不足で理解できず申し訳ございません。
ただし教えていただいたコードをじっくり調べさせていただき、私自身の今後のレベルアップにつなげていきたいと思います。お恥ずかしい限りですが返信のコメントすらできないことをご容赦くださいませm(__)m。

[think49]

「jQuery('.e01.e03,.e01.e04,.e01.e05') で目的を達成できるが、条件が複雑なので and, or 条件で指定したい」という事ですよね。
'.e01' and ('.e03' or '.e04' or '.e05') は jQuery(joinSelectors('.e01', ['.e03', '.e04', '.e05'])) で書き表せますよ、という事です。

Answer 3

あまりに条件が複雑になってセレクタが書きづらくなっているとしたら、設計に問題があるのかもしれません。
e01 などの他に、今回のような表示コントロール用のクラス、たとえば block を追加でつけ、表示切り替えは $('.block').display(...) で済ます、という方がよいのかもしれません。

Answer 4

$(".e01.e03",".e01.e04",".e01.e05",".e01.06").css("display","none");

でもできそうですよねｗ

--追記--
とりあえず、jQueryセレクタの$()の中で論理演算子の&&とか||とかを使うことは出来ませんので、
セレクタで何とかしたいならセレクタ仕様の範囲内で頑張る感じになるんでしょうかねー。

Comments

[take4]

ありがとうございます。やはり単純に書く方法はなさそうですね。なるべく短く書けるよう精進いたします。

Answer 5

$(".e01.e03").display(...)
$(".e01.e04").display(...)
$(".e01.e05").display(...)

って3回書けばとりあえずできそうじゃない?

Comments

[take4]

ありがとうございます。
しかしながら実際のソースコードがもう少し複雑なため、もしご教授いただいた方法ですと約150回書かないと実現できそうにないです。
可能であれば「and内or」の書き方がもしあればお教えいただけると助かります。

[realizerS]

$(".e01.e03,.e01.e04,.e01.e05").css(...)
のほうがマシかなぁ。
jQueryのandは$(要素1要素2)と要素をスペースを入れずに書いて、
orは$(要素, 要素)とカンマを入れて書くんだからこれ以上短くしたかったら$()の内側の文字列をうまく作り出すことになるのかな

[take4]

知識不足で申し訳ありませんでした。単純に書く方法はなさそうなので、もっと調べてみようと思います。ありがとうございます。