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

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

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

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

jQuery

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

Q&A

1回答

1843閲覧

子要素がすべてdisplay noneだったら(=display:inlineがなければ)、親要素を消すには

na818

総合スコア1

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2022/06/23 02:36

編集2022/06/24 15:13

前提・実現したいこと

実現したいこと:子要素がすべてdisplay noneだったら、親要素を消す
前提
1.view_timer.jsというJavaScriptを使用してコンテンツのタイマー設定をしています。
設定した開始日時と終了日時を見て、display:noneとdisplay:inlineを自動的にstyle付与しています。
2.親要素はflexで横並びにして、横幅指定してします。打ち消し線
その中に子要素を入れて、複数のコンテンツをタイマー設定で切替表示しています。
3.結論
もし、子要素がすべて、display:noneになったら(=display:inlineがなければ)、親要素のみ横幅指定しているため、余白が残ってしまうため、JavaScriptで制御して、親要素を削除するようにする。

※プログラミング初心者で申し訳ございませんが、どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

https://teratail.com/questions/40956」を参考にして、実装してみたのですが、
子要素がすべて、display:noneになったら(=display:inlineがなければ)、
不明なidが親要素に付与されていて、まだ、親要素が残っています。

表示要素がない場合の状態(キャプチャ)

※一番左側が子要素が非表示で、親要素のみが残ってしまっている状態です。
イメージ説明

上記キャプチャの一番左側に、以下のスタイルが残ってしまいます。

.keyword_list li{ width: 15%; margin-right: 1.66666%; background: #fdeff2; padding: 0.5%; display: flex; align-items: center; justify-content: center; text-align: center; }

https://teratail.com/questions/40956 (以下、参照したコード)

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

該当のソースコード

うまくいっていないHTMLの箇所(不明なIDが付いてしまった「id="sizzle1655950385117"」)

<li class="keyword_item" id="sizzle1655950385117"> <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/22 10:00" style="display: none;"> <a href="#">#ハッシュタグ</a> </span> </li>

実際に自分で改変してみたJavaScript

//https://teratail.com/questions/40956 $(".keyword_item").each(function(index) { if($("span([style*='inline'])", this).length == 0){ // spanタグにdisplay:inlineが1つもなければ $(this).addClass("hidden-display"); } else { $(this).removeClass("hidden-display"); } });

実際のHTML

<!-- .keyword_list --> <ul class="keyword_list mt10 mb20"> <!-- タイマー設定 1 --> <li class="keyword_item"> **親要素**            **子要素** <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/22 10:00"> <a href="#">#ハッシュタグ</a> </span> </li> <!-- タイマー設定 2 --> <li class="keyword_item"> **親要素**            **子要素** <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00"> <a href="#">#ハッシュタグ</a> </span>            **子要素** <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00"> <a href="#">#ハッシュタグ2</a> </span> </li> <!-- タイマー設定 3 --> <li class="keyword_item"> **親要素**            **子要素** <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00"> <a href="#">#ハッシュ</a> </span>            **子要素** <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00"> <a href="#">#ハッシュ2</a> </span> </li> <!-- タイマー設定 4 --> <li class="keyword_item"> **親要素**            **子要素** <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00"> <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ</a> </span>            **子要素** <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00"> <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ2</a> </span> </li> <!-- タイマー設定 5 --> <li class="keyword_item"> **親要素**            **子要素** <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00"> <a href="#">#ハッシュタグ</a> </span>            **子要素** <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00"> <a href="#">#ハッシュタグ2</a> </span> </li> <!-- タイマー設定 6 --> <li class="keyword_item"> **親要素**            **子要素** <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00"> <a href="#"><a href="#">#ハッシュタグ#ハッシュ</a></a> </span>            **子要素** <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00"> <a href="#">#ハッシュタグ#ハッシュ2</a> </span> </li> </ul> <!-- /.keyword_list -->

スタイルシート

/* --------------------------------------------------------------------------------------------- KEYWORD --------------------------------------------------------------------------------------------- */ .keyword_list{ width:100%; display: flex; list-style: none; padding: 0; } .keyword_list li{ width: 15%; margin-right: 1.66666%; background: #fdeff2; padding: 0.5%; display: flex; align-items: center; justify-content: center; text-align: center; } .keyword_list li a{ font-weight: 700; } .hidden-display{ display: none; } @media screen and (max-width: 767px) { .keyword_list{ flex-wrap: wrap; } .keyword_list li{ width: 30%; margin-right: 3.33333%; margin-bottom: 15px; } .keyword_list li a{ font-size: 13px; } }

view_timer.js

$(document).ready(function() { $(".view_timer").each(function(index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { $(this).show(); } else { $(this).hide(); } }); });

何卒、よろしくお願いいたします。

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

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

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

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

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

yambejp

2022/06/23 02:45 編集

> display noneだったら だと、条件が足りないような気がします。 表示要素がないなら普通に親要素は見えなくなりませんか? 具体的にどういう状態が問題なのか例示できますか?
退会済みユーザー

退会済みユーザー

2022/06/23 03:01

display: none; だけを定義したCSSクラスを使う前提があれば、クラス適用済みか否かでquerySelectorAllしても良さそうだけど
na818

2022/06/23 03:57

【yambejp様】 ご確認ありがとうございます。 子要素の表示要素がない場合の親要素の状態=キャプチャを質問上部へ追加いたしました。 ※一番左側が子要素が非表示で、親要素のみが残ってしまっている状態となります。 キャプチャの一番左側に、以下のスタイルが残ってしまいます。 ----------- .keyword_list li{ width: 15%; margin-right: 1.66666%; background: #fdeff2; padding: 0.5%; display: flex; align-items: center; justify-content: center; text-align: center; } ----------- 【sPy2bUDOZ4uRa7t様】 ご確認ありがとうございます。 「querySelectorAll」については、まだ知見がないため、調べてみます。
guest

回答1

0

view_timer.js の方を見てみると、show() と hide() で表示/非表示の切り替えをしています。
これの表示されている要素の数が0なら親要素を非表示にすればいいわけです。

jQueryには :visible という便利な疑似クラスがあります。これをつかって表示されている要素を取得できます。
親要素の表示/非表示も show() hide() を使えば簡単でしょう。

js

1$(".keyword_item").each(function(index) { 2 if($("span:visible", this).length == 0){ 3 // :visibleなspanがなければ 4 $(this).hide(); 5 } 6 else { 7 $(this).show(); 8 } 9});

投稿2022/06/23 05:03

hatena19

総合スコア33620

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

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

na818

2022/06/24 02:15 編集

【hatena19】様 ご確認ありがとうございます。 ご教授いただいたScriptを実装してみましたところ、子要素に、display:noneとdisplay:inlineが混在している場合も、親要素「.keyword_item」が非表示になってしまいました。 display:noneとdisplay:inlineが混在している時には、display:inlineの要素は表示したいため、なぜこのような出力結果になるのか、調べてみます。 以下に、実装したHTMLを記述いたしました。 こちらをHTMLで保存していただくと、ローカル上でも挙動が確認できるような作りになっております。 ===================================== 実装後のHTML ===================================== <!doctype html> <html lang="ja"> <head> <meta charset="shift_jis"> <meta content="width=device-width" name="viewport"> <meta content="telephone=no" name="format-detection"> <title>Demo</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,500,700&subset=japanese"> <style> .view_timer{display:none;} .site-wrapper { width: 980px; padding: 80px 15px 0 15px; margin: 0 auto; } @media screen and (max-width: 767px) { .site-wrapper { width: 100%; padding: 56px 0 0 0; } } @media screen and (max-width: 559px) { .site-wrapper { width: 100%; padding: 70px 0 0 0; } } .site-wrapper .site-main { width: 100%; padding-top: 1px } @media screen and (max-width: 767px) { .site-wrapper .site-main { width: 90.66666667%; margin-left: auto; margin-right: auto } } .site-wrapper .site-main .sec-wrap { width: 100%; margin: 20px 0 0 0; } /* ------------------------------------- KEYWORD ------------------------------------- */ .keyword_list{ width:100%; display: flex; list-style: none; padding: 0; } .keyword_list li{ width: 15%; margin-right: 1.66666%; background: #fdeff2; padding: 0.5%; display: flex; align-items: center; justify-content: center; text-align: center; } .keyword_list li a{ font-weight: 700; } .hidden-not-display{ display: none; } @media screen and (max-width: 767px) { .keyword_list{ flex-wrap: wrap; } .keyword_list li{ width: 30%; margin-right: 3.33333%; margin-bottom: 15px; } .keyword_list li a{ font-size: 13px; } } </style> </head> <body> <div class="site-wrapper"> <div class="site-main"> <ul class="keyword_list mt10 mb20"> <li class="keyword_item"> <span data-end-date="2022/6/22 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュタグ</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュタグ</a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュタグ2</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュ</a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュ2</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ</a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ2</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#">#ハッシュタグ</a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュタグ2</a> </span> </li> <li class="keyword_item"> <span data-end-date="2022/6/30 10:00" data-start-date="2022/6/20 10:00" class="view_timer"> <a href="#"><a href="#">#ハッシュタグ#ハッシュ</a></a> </span> <span data-end-date="2022/7/15 10:00" data-start-date="2022/6/30 10:00" class="view_timer"> <a href="#">#ハッシュタグ#ハッシュ2</a> </span> </li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> //view_timer $(document).ready(function() { $(".view_timer").each(function(index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { $(this).show(); } else { $(this).hide(); } }); }); $(".keyword_item").each(function(index) { if($("span:visible", this).length == 0){ // :visibleなspanがなければ $(this).hide(); } else { $(this).show(); } }); </script> </body> </html>
hatena19

2022/06/24 06:13 編集

$(document).ready( の中に入れとかないと、view_timerが実行される前に実行されてしまいます。 CSSに .view_timer {display:none;} があるので、 初期状態は、 span.view_timer がすべて非表示なので、親要素もすべて表示になります。 <script> //view_timer $(document).ready(function () { $(".view_timer").each(function (index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { $(this).show(); } else { $(this).hide(); } }); $(".keyword_item").each(function (index) { if ($("span:visible", this).length == 0) { // :visibleなspanがなければ $(this).hide(); } else { $(this).show(); } }); }); </script>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問