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

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

ただいまの
回答率

90.50%

  • jQuery

    8144questions

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

jQueryを使用した複数条件での絞り込み

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,340

takatouaya

score 1

jQueryを使用して、要素の絞り込みを行いたいです。

最初はすべての要素が表示されており、チェックボックスにチェックをつける(または外す)ことで、
そのチェックボックスについているidと同じclassを持つ要素の表示・非表示を行いたいと考えています。

下記アドレスで紹介されているものと同じような形だったので、こちらを参考にしてみました。
http://jsdo.it/carl_marie/jquery_hide_rows

ですが、今回、ANDだけでなくORでの条件も必要になってしまい、
例えば、

「attribute01」「attribute02」「type03」「type06」「option03」「option02」

にチェックがついている場合は、

「attribute01」もしくは「attribute02」のclassを持つものの中から「type03」「type06」「option03」「option02」のいずれかのclassを持つものを表示

というようにしたいです。

<div id="search">
    <ul id="attribute">
        <li><label class="selected"><input type="checkbox" id="all" class="sort" checked="checked">すべて</label></li>
        <li><label><input type="checkbox" id="attribute01" class="sort">attribute01</label></li>
        <li><label><input type="checkbox" id="attribute02" class="sort">attribute02</label></li>
        <li><label><input type="checkbox" id="attribute03" class="sort">attribute03</label></li>
        <li><label><input type="checkbox" id="attribute04" class="sort">attribute04</label></li>
        <li><label><input type="checkbox" id="attribute05" class="sort">attribute05</label></li>
    </ul>

    <ul id="type">
        <li><label><input type="checkbox" id="type01" class="sort">type01</label></li>
        <li><label><input type="checkbox" id="type02" class="sort">type02</label></li>
        <li><label><input type="checkbox" id="type03" class="sort">type03</label></li>
        <li><label><input type="checkbox" id="type04" class="sort">type04</label></li>
        <li><label><input type="checkbox" id="type05" class="sort">type05</label></li>
        <li><label><input type="checkbox" id="type06" class="sort">type06</label></li>
        <li><label><input type="checkbox" id="type07" class="sort">type07</label></li>
        <li><label><input type="checkbox" id="type08" class="sort">type08</label></li>
    </ul>

    <ul id="option">
        <li><label><input type="checkbox" id="option01" class="sort">option01</label></li>
        <li><label><input type="checkbox" id="option02" class="sort">option02</label></li>
        <li><label><input type="checkbox" id="option03" class="sort">option03</label></li>
        <li><label><input type="checkbox" id="option04" class="sort">option04</label></li>
        <li><label><input type="checkbox" id="option05" class="sort">option05</label></li>
        <li><label><input type="checkbox" id="option06" class="sort">option06</label></li>
        <li><label><input type="checkbox" id="option07" class="sort">option07</label></li>
        <li><label><input type="checkbox" id="option08" class="sort">option08</label></li>
        <li><label><input type="checkbox" id="option09" class="sort">option09</label></li>
        <li><label><input type="checkbox" id="option10" class="sort">option10</label></li>
    </ul>
</div><!-- /.#search -->

<ul id="list">
    <li class="attribute01 type01 option03"><a href="#"><img src="sample.jpg"></a></li>
    <li class="attribute03 type03 type02 option01"><a href="#"><img src="sample.jpg"></a></li>
    <li class="attribute02 type05 type03 option04 option05"><a href="#"><img src="sample.jpg"></a></li>
    <li class="attribute05 type06 option06"><a href="#"><img src="sample.jpg"></a></li>
    <li class="attribute03 type07 option05"><a href="#"><img src="sample.jpg"></a></li>
    <li class="attribute04 type04 option07"><a href="#"><img src="sample.jpg"></a></li>
    <li class="attribute03 type02 option08"><a href="#"><img src="sample.jpg"></a></li>
    <li class="attribute04 type08 option09"><a href="#"><img src="sample.jpg"></a></li>
    <li class="attribute01 type03 option01"><a href="#"><img src="sample.jpg"></a></li>
    <li class="attribute02 type02 option10"><a href="#"><img src="sample.jpg"></a></li>
</ul>
#list [class*="hidden-"] {
    display: none !important;
}
$(function (){
    var $filter_tags =['attribute01','attribute02','attribute03','attribute04','attribute05','type01','type02','type03','type04','type05','type06','type07','type08','option01','option02','option03','option04','option05','option06','option07','option08','option09','option10'];
    var $filter_all = $('#all');

    //チェックボックスがクリックされた時
    $("#search li label input").click(function() {

        $(this).parent().toggleClass("selected");

        $.each($filter_tags, function() {
            if($('#' + this).is(':checked')) {
                         $("#list li:not(." + this + ")").addClass('hidden-not-' + this);
                         $filter_all.prop('checked',false).parent().removeClass("selected");
                }
            else if($('#' + this).not(':checked')) {
                         $("#list li:not(." + this + ")").removeClass('hidden-not-' + this);
                }
        });

        //チェックボックスが1つも選択されていない場合に、絞り込まないボタンにclass="selected"をつける
        if ($('.sort:checked').length == 0 ){
            $filter_all.prop('checked',true).parent().addClass("selected");
            $(".sort").parent().removeClass("selected");
        };
    });     
});

ORにするためにはどのようにすればいいのか、全く見当がつかず…
お手数をおかけしますが、よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+1

こんなかんじ?

$( function() {
    $( '#search li label input' ).click( function() {
        var inputkey = [ 'attribute', 'type', 'option' ]
          , i, l = inputkey.length
          , $res, $tmp, res = []
          , $all = $( '#all' );
          ;
        $tmp = $( '#list > li' ).removeClass( 'active' );
        for ( i = 0; i < l; i++ ) {
            res = []
            $( '#search input[id^="' + inputkey[ i ] + '"]:checked' ).each( function() {
                res.push( $( this )[ 0 ].id );
            } );
            if ( !res.length ) { continue; }
            $tmp = $( '#list > li.' + res.join( ', #list > li.' ) );
            if ( !$res || !$res.length ) {
                $res = $tmp;
            } else if ( $tmp.length ) {
                $res = $res.filter( '.' + res.join( ', .' ) );
            }
        }
        if ( $res && $res.length ) {
            $res.addClass( 'active' );
            $all.prop( 'checked', false );
        } else {
            // No Selected
            res = false;
            $all.prop( 'checked', true );
        }
    } );
} );

動くサンプル:https://jsfiddle.net/jwqyan5j/


追記:

絞込みが出来れば #all とかおまけでいいよね?と手を抜いていました。下記でそれについては是正されていると思われます。

$( function() {
    $( '#search li label input:not(#all)' ).click( function() {
        var inputkey = [ 'attribute', 'type', 'option' ]
          , i, l = inputkey.length
          , $res, $tmp, res = []
          , $all = $( '#all' );
          ;
        $tmp = $( '#list > li' ).removeClass( 'active' );
        for ( i = 0; i < l; i++ ) {
            res = []
            $( '#search input[id^="' + inputkey[ i ] + '"]:checked' ).each( function() {
                res.push( $( this )[ 0 ].id );
            } );
            if ( !res.length ) { continue; }
            $tmp = $( '#list > li.' + res.join( ', #list > li.' ) );
            if ( !$res || !$res.length ) {
                $res = $tmp;
            } else if ( $tmp.length ) {
                $res = $res.filter( '.' + res.join( ', .' ) );
            }
        }
        if ( $res && $res.length ) {
            $res.addClass( 'active' );
            $all.prop( 'checked', false );
        } else {
            // No Selected
            res = false;
            $all.prop( 'checked', true );
        }
    } );
    $( '#all' ).click( function() {
        if (  $( this ).prop( 'checked') === true ) {
            $( '#list > li' ).removeClass( 'active' );
            $( '#search input:checked:not(#all)' ).prop( 'checked', false );
        }
    } );
} );

動くサンプル:https://jsfiddle.net/jwqyan5j/2/


今回、絞り込み用のidとclassを「hogehoge01」というような形で、ナンバリングしたものを振っているのですが、これを、ナンバリングではなく、個別に単語で指定することは可能なのでしょうか。

可能です。
下記部分は「idがinputkey[ i ]('attribute', 'type', 'option')から始まるもののうち、チェックされているもの」を1まとまりとして扱っています。その上でidをクラス名として後で使うために保存しています。

$( '#search input[id^="' + inputkey[ i ] + '"]:checked' ).each( function() {
    res.push( $( this )[ 0 ].id );
} );
<input type="checkbox" id="attribute01" class="sort">

例えばクラスで1まとまりにすることも出来ます。クラス名で使用する単語をid以外の要素(ここではdata-key)にすることも出来ます。

$( '#search input.' + inputkey[ i ] + ':checked' ).each( function() {
    res.push( $( this ).attr( 'data-key' ) );
} );
<input type="checkbox" data-key="keyword" class="sort attribute">

検索条件にヒットするものがなかった場合

「// No Selected」の後の部分でそういったコードを追加すればいいと思いますよ。
(今はとりあえず#allをチェックすることしかしていません)

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/05 19:19

    ご回答いただき、ありがとうございます!
    ご教示いただいたスクリプトで、かなり近い形を実現できました。

    差し支えなければ、合わせてお伺いしたいのですが、
    チェックボックスにチェックを入れると、
    最初についている「すべて」のチェックが外れるのですが、
    再度「すべて」にチェックを入れると、要素が表示されなくなってしまいました。

    ただ、要素が再度表示されない件に関しては、

    $all.prop( 'checked', true );

    の直前に

    $( '#list > li' ).addClass( 'active' );

    を追記することで対応できたのですが、
    「すべて」のチェックが外れたあと、「すべて」をクリックしても、チェックを入れることができなくなってしまいました。

    こちら、一度「すべて」のチェックが外れてしまったあと、クリックでにチェックを入れると、すべての要素が表示され、
    「すべて」以外のチェックボックスのチェックが外れるようにすることはできるのでしょうか。

    もう1点、こちらは後学のためという意味合いが強いのですが、
    今回、絞り込み用のidとclassを「hogehoge01」というような形で、ナンバリングしたものを振っているのですが、これを、ナンバリングではなく、個別に単語で指定することは可能なのでしょうか。

    具体的なスクリプトをご教示いただいたのに大変恐縮なのですが、
    よろしくお願いします。

    キャンセル

  • 2016/08/05 19:39

    五月雨になってしまい申し訳ありません…
    検索条件にヒットするものがなかった場合、すべての要素が表示されてしまうようです…。
    できれば、「ヒットする項目はありませんでした」などの文言を表示させたいのですが、
    この件に関しまして、ご教示いただくことは可能でしょうか。

    キャンセル

  • 2016/08/05 19:58

    追記しました。

    キャンセル

  • 2016/08/05 20:49

    追記していただいた内容で、検索条件にヒットするものがなかった場合の処理も含め、
    対応することができました。
    質問に対してのご回答もいただき、大変助かりました。
    詳しいご説明で、大変勉強になりました。ありがとうございます。

    キャンセル

+1

こういうことじゃなくて?

 CASE 1 OR [ when1 か when2 をもつオブジェクト ]

$(".when1,.when2")

 CASE 2 AND [ when1 と when2 をもつオブジェクト ]

$(".when1.when2")

 CASE 3 OR AND OR  has 

「attribute01」「attribute02」に加え、「type01」「option01」にチェックをした場合、
「attribute01」でかつ、「type01」か「option01」を持つものと、
「attribute02」でかつ、「type01」か「option01」を持つものを表示

$("li:has(.attribute01,.attribute02):has(.type01,.option01)"); // ノーテスト

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/05 14:33

    ご回答いただきまして、ありがとうございます。
    説明不足ですみません。

    投稿時に記載していたサンプルを使って補足しますと、

    「attribute01」「attribute02」
    にのみチェックされた場合は、

    $("#list li").fadeOut(); // 要素のリストを全て消す
    $(".attribute01, .attribute02").fadeIn(); // ヒットした要素のみ再表示

    のような形にできれば、どちらかのclassがヒットした場合に表示させることができ、

    「attribute01」「attribute02」「type01」「option01」
    にチェックをした場合、

    $("#list li").fadeOut(); // 要素のリストを全て消す
    $(".attribute01.type01, .attribute01.option01, .attribute02.type01, .attribute02.option01").fadeIn(); // ヒットした要素のみ再表示

    と書いているような形にできれば、なんとなく表示非表示ができるのでは、
    と思ったのですが、

    「attribute01」「attribute02」にのみチェックがある場合、
    「attribute01」「attribute02」のどちらかのクラスを持つものをすべて表示

    という形と、

    「attribute01」「attribute02」に加え、「type01」「option01」にチェックをした場合、
    「attribute01」でかつ、「type01」か「option01」を持つものと、
    「attribute02」でかつ、「type01」か「option01」を持つものを表示


    という形を実現させるためには、どのようにif文内の記述や、チェックボックスとの連携を行うのかがわからず、質問しました。


    念のための補足なのですが、サンプルコードのHTML部分に記述を追加しました。

    「attribute01〜05」をのいずれかを同時に持つ要素はないのですが、
    「type01〜08」と「option01〜10」については、
    複数のtype、もしくはoptionを持つことがあります。


    お手数をおかけいたしますが、よろしくお願いします。

    キャンセル

  • 2016/08/05 16:08

    度々ありがとうございます。
    ちょっと、うまいこと使っていく方法がわからなかったので、もう少し考えてみます。

    キャンセル

0

すみません、さきほど掲載したの間違えていました。
CSSのソースもつけていなかったのでわかりにくかったと思います。
ちょっとわかりやすいように横並びに変えちゃいましたがこんな感じでしょうか?
サンプル

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/05 17:31

    あ、ごめんなさい間違えてるなこれ・・・

    キャンセル

  • 2016/08/05 18:09

    ご回答いただきまして、ありがとうございます!

    ちょっと条件が多くてわかりにくくなってしまい、申し訳ありません…。
    私の方でも、ANDだけ、やORだけ、という形であれば、
    それらしいものができたのですが、サンプル内の「type」や「option」が、このような形で絡んでくるとどうすれば良いのか…といった状態になってしまったので、
    質問させていただきました。

    だいぶヒントをいただいた感じなので、私の方でも、もう少し頑張ってみます。

    キャンセル

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

  • jQuery

    8144questions

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