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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

5306閲覧

親要素の中が全て非表示になったら、親要素も非表示にする処理を行いたい

ryosaku

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

1クリップ

投稿2016/07/13 04:51

編集2016/07/13 05:19

チェックボックスを利用した要素の絞り込みを実装しており、子要素が全て非表示になったら親要素も非表示にしたいと思っているのですが、ググっても思うようなサンプルが見つからず、ご教授いただければと思っております。

同じclassを持った親要素が複数ある状態で、それぞれ中に子要素が不特定数入っています。

それとは別にチェックボックスが複数用意されており、子要素のclassと、選択されたチェックボックスを見て、それが含まれていない場合のみ、子要素に「class="hidden-not-○○"(hidden-not-red、hidden-not-sour等)」が付与され、css制御で「[class*="hidden-"]{display:none}」が適用され非表示になります。

また、選択したチェックボックスを解除すると、付与された非表示用のclassが削除され、再び表示されるようになります。

ある親要素内の子要素が全て非表示になった場合、親要素に「class="hidden-not-display"」を付与したいのですが、どのようにすればよろしいでしょうか。

html

1<script> 2 var $chkbxFilter_tags = ['red','yellow','green','vegetable','fruit','sweet','hot','sour']; 3 var $chkbxFilter_blocks = ['section'] 4</script> 5 6<div id="search-box"> 7 <div class="list-group"> 8 <label class="list-group-item disabled"> 9 <p class="list-group-item-text"></p> 10 </label> 11 <label class="list-group-item"> 12 <input type="checkbox" id="red" class="sort s_color"> 13 <h4 class="list-group-item-heading"></h4> 14 </label> 15 <label class="list-group-item"> 16 <input type="checkbox" id="yellow" class="sort s_color"> 17 <h4 class="list-group-item-heading"></h4> 18 </label> 19 <label class="list-group-item"> 20 <input type="checkbox" id="green" class="sort s_color"> 21 <h4 class="list-group-item-heading"></h4> 22 </label> 23 </div> 24 <div class="list-group"> 25 <label class="list-group-item disabled"> 26 <p class="list-group-item-text">種類</p> 27 </label> 28 <label class="list-group-item"> 29 <input type="checkbox" id="vegetable" class="sort s_type"> 30 <h4 class="list-group-item-heading">野菜</h4> 31 </label> 32 <label class="list-group-item"> 33 <input type="checkbox" id="fruit" class="sort s_type"> 34 <h4 class="list-group-item-heading">果物</h4> 35 </label> 36 </div> 37 <div class="list-group"> 38 <label class="list-group-item disabled"> 39 <p class="list-group-item-text"></p> 40 </label> 41 <label class="list-group-item"> 42 <input type="checkbox" id="sweet" class="sort s_taste"> 43 <h4 class="list-group-item-heading">甘い</h4> 44 </label> 45 <label class="list-group-item"> 46 <input type="checkbox" id="hot" class="sort s_taste"> 47 <h4 class="list-group-item-heading">辛い</h4> 48 </label> 49 <label class="list-group-item"> 50 <input type="checkbox" id="sour" class="sort s_taste"> 51 <h4 class="list-group-item-heading">酸っぱい</h4> 52 </label> 53 </div> 54</div> 55 56<div id="item_images_wrap"> 57 <div class="about_sale_main"> 親要素 58 <section class="sale_wrap red vegetable sweet"></section> 子要素 59 <section class="sale_wrap red fruit hot"></section> 60 <section class="sale_wrap red fruit sour"></section> 61 <section class="sale_wrap yellow fruit sour"></section> 62 <section class="sale_wrap yellow vegetable sweet"></section> 63 <section class="sale_wrap yellow vegetable hot"></section> 64 <section class="sale_wrap green fruit sweet"></section> 65 <section class="sale_wrap green fruit hot"></section> 66 <section class="sale_wrap green vegetable sour"></section> 67 </div> 68 <div class="about_sale_main"> 69 ...不特定数 70 </div> 71 <div class="about_sale_main"> 72 ...不特定数 73 </div> 74</div>

Javascript

1$(function (){ 2 $('.s_color').on('click', function() { 3 if ($(this).prop('checked')){ 4 $('.s_color').prop('checked', false); 5 $(this).prop('checked', true); 6 } 7 }); 8 $('.s_type').on('click', function() { 9 if ($(this).prop('checked')){ 10 $('.s_type').prop('checked', false); 11 $(this).prop('checked', true); 12 } 13 }); 14 $('.s_taste').on('click', function() { 15 if ($(this).prop('checked')){ 16 $('.s_taste').prop('checked', false); 17 $(this).prop('checked', true); 18 } 19 }); 20 21 var $chkbxFilter_all = $('#all'); 22 $chkbxFilter_all.click(function() { 23 $(".sort").prop('checked',false); 24 $chkbxFilter_all.prop('checked',true); 25 }); 26 $("#search-box input").click(function() { 27 $(this).parent().toggleClass("selected"); 28 $.each($chkbxFilter_tags, function() { 29 if($('#' + this).is(':checked')) { 30 $("#item_images_wrap " + $chkbxFilter_blocks + ":not(." + this + ")").addClass('hidden-not-' + this); 31 $chkbxFilter_all.prop('checked',false).parent().removeClass("selected"); 32 } else if($('#' + this).not(':checked')) { 33 $("#item_images_wrap " + $chkbxFilter_blocks + ":not(." + this + ")").removeClass('hidden-not-' + this); 34 } 35 }); 36 if ($('.sort:checked').length == 0 ){ 37 $chkbxFilter_all.prop('checked',true).parent().addClass("selected"); 38 $(".sort").parent().removeClass("selected"); 39 }; 40 hoge() 41 }); 42}); 43

※javascriptは http://jsfiddle.net/kah601xq/11/ を参考にし、改変して使用しています。

mondaminZ👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/07/13 04:55

HTMLにチェックボックスがありません。また、JavaScriptとHTMLも別物で、紐付いていません。
think49

2016/07/13 05:07

参考にしたサンプルURLを掲載すべきと思いますが、http://jsfiddle.net/kah601xq/11/ でしょうか。 対応する親要素にclass属性を割り当てるか、parent()で親要素を辿ってみてはいかがでしょうか。
guest

回答2

0

ベストアンサー

チェックボックスが切り替わる度に、以下のコードを実行すればいけると思います。

  • 各.about_sale_mainのタグで実行される
  • 自分の子要素sectionの中で、クラスにhidden-を含まない子要素の数を調べる
  • 0個なら全ての要素にhiddenが付いているので自身にhidden-not-displayをつける

1個以上なら自身にhidden-not-displayを外す

Javascript

1$(".about_sale_main").each(function(index) { 2 if($("section:not([class*='hidden-'])", this).length == 0){ 3 // hidden-を含まないsectionが0個、つまり全てhidden-を含んでいるので見えていない 4 $(this).addClass("hidden-not-display"); 5 } 6 else { 7 $(this).removeClass("hidden-not-display"); 8 } 9});

投稿2016/07/13 05:39

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryosaku

2016/07/14 02:26

理想通りの動作が出来るようになりました!本当にありがとうございます!
guest

0

特定のタグを基軸に考えるなら、siblingを調べるかparentのchildrenを
調べるかのどちらかでしょうね
ただタグ要素がすべて非表示でもダイレクトに書かれたcontentTextが
あるかもしれないので仕様をよく詰めたほうがよいでしょう

投稿2016/07/13 05:28

yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問