質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • jQuery

    6930questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6015questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

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

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,379

take4

score 21

前提・実現したいこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2016/04/10 06:38

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

    キャンセル

  • take4

    2016/04/12 19:00

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

    キャンセル

回答 5

checkベストアンサー

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/10 01:01

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

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

    キャンセル

  • 2016/04/10 17:43

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

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

    キャンセル

  • 2016/04/12 20:33

    > 「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を適用する
    ということです。

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

    キャンセル

+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 さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/10 01:09

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

    キャンセル

  • 2016/04/10 06:25

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/09 22:55

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

    キャンセル

  • 2016/04/09 23:04

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

    キャンセル

  • 2016/04/09 23:11

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

    キャンセル

0

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

でもできそうですよねw

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/09 23:23

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • jQuery

    6930questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6015questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。