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

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

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

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

jQuery

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

Q&A

解決済

5回答

20882閲覧

特定の子要素が存在しない場合、親要素を非表示にしたい

castail

総合スコア117

JavaScript

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

jQuery

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

3グッド

6クリップ

投稿2015/12/08 02:37

特定の子要素が存在しない場合、親要素を非表示にしたいです。

具体的構成は以下の通りです。

lang

1<div class="hoge_parent"> 2 <h4>…</h4> or <h3>…</h3> 3 <div class="hoge_child"> 4 <ul> 5 <li>…</li> 6 <li>…</li> 7 <li>…</li> 8 <li>…</li> 9 </ul> 10 </div> 11</div>

「.hoge_parent」は複数存在します。

それぞれの「.hoge_child > ul > li」がひとつも存在しない場合、その「.hoge_parent」を非表示にしたいです。

ご教授の程よろしくお願いいたします。

izkn, kaputaros, pinpikokun👍を押しています

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

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

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

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

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

guest

回答5

0

ベストアンサー

セレクタだけでやってみました。

javascript

1$(".hoge_parent:not(:has(.hoge_child > ul > li))").hide();

投稿2015/12/08 05:27

tozjp

総合スコア790

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

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

ikki57

2015/12/08 06:09

これでいけますね。 (先程ループ処理で行ったのですが、セレクタだけで可能ですね)
castail

2015/12/12 08:26

ご回答ありがとうございました。 ご教授頂いた内容で実現できました! 感謝いたします。
ikuwow

2015/12/14 05:24

素晴らしい回答に思わず唸ってしまいました。
guest

0

なんとなくJQueryを使わずに書いてみました。

ネストが深くて嫌になりますね。

JavaScript

1window.onload = function(){ 2 var parentEle = document.getElementsByClassName("hoge_parent"); // class hoge_parentを検索 3 for(var i = 0; i < parentEle.length; i++){ 4 // class hoge_parentが付いている要素毎に繰り返し 5 var ulEle = parentEle[i].getElementsByTagName("ul");// hoge_parent内のul要素を検索 6 var flag = false; 7 for(var j = 0; j < ulEle.length; j++){ 8 if(ulEle[j].hasChildNodes()){ 9 // ulに子要素があるなら 10 var ulChilds = ulEle[j].childNodes // ulの子要素を取得 11 for(var k = 0; k < ulChilds.length; k++){ 12 // ulの子要素毎に繰り返し 13 if(ulChilds[k].tagName == "LI"){ 14 // ulの子要素にliを含むなら 15 flag = true; 16 break; 17 } 18 } 19 if(flag){ 20 break; 21 } 22 } 23 } 24 if(!flag){ 25 // li要素を含まないため非表示 26 parentEle[i].style.display = "none"; //非表示 27 //parentEle[i].parentNode.removeChild(parentEle[i]);//削除 28 } 29 } 30} 31 32// IEでgetElementsByClassNameが使用できないので自分で定義 33function getElementsByClassName(targetClass, tagName){ 34 if(tagName==null){ 35 tagName = "*"; 36 } 37 var foundElements = new Array(); 38 if (document.all){ 39 var allElements = document.all; 40 } 41 else { 42 var allElements = document.getElementsByTagName(tagName); 43 } 44 var j = 0; 45 for (i=0;i<allElements.length;i++) { 46 if (allElements[i].className == targetClass) { 47 foundElements[j] = allElements[i]; 48 j++; 49 } 50 } 51 return foundElements; 52}

投稿2015/12/08 04:38

moredeep

総合スコア1507

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

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

castail

2015/12/12 08:27

ご回答ありがとうございます。 せっかくですが「tozjp」様をベストアンサーとさせて頂きます。 何卒ご容赦下さいませ。
guest

0

javascript

1<script type="text/javascript" src="jquery-1.10.2.js"></script> 2<script type="text/javascript"> 3$(function(){ 4 5 6 $ele = $(".hoge_child"); 7 $ele.each(function(index, child) { 8 $child = $(child); 9 10 if ( $child.find("ul > li").length == 0 ) { 11 $child.parent(".hoge_parent").hide(); 12 } 13 14 }); 15 16 }); 17</script> 18<div class="hoge_parent"> 19 <h4></h4> or <h3></h3> 20 <div class="hoge_child"> 21 <ul> 22 23 </ul> 24 </div> 25</div> 26 27 28<div class="hoge_parent"> 29 <h4></h4> or <h3></h3> 30 <div class="hoge_child"> 31 <ul> 32 <li></li> 33 <li></li> 34 <li></li> 35 <li></li> 36 </ul> 37 </div> 38</div> 39 40 41<div class="hoge_parent"> 42 <h4></h4> or <h3></h3> 43 <div class="hoge_child"> 44 <ul> 45 <li></li> 46 <li></li> 47 <li></li> 48 <li></li> 49 </ul> 50 </div> 51</div>

こちらで試してください。

投稿2015/12/08 02:56

編集2015/12/08 03:14
liguofeng29

総合スコア801

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

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

castail

2015/12/12 08:27

ご回答ありがとうございます。 せっかくですが「tozjp」様をベストアンサーとさせて頂きます。 何卒ご容赦下さいませ。
guest

0

次のようにしてみてはいかがでしょうか?

javascript

1$(function(){ 2 $(".hoge_parent").each(function(idx, ele){ 3 var eleTarget= $(this).find(".hoge_children > ul > li"); 4 if(eleTarget.length <= 0){ 5 $(this).hide(); 6 } 7 }); 8});

投稿2015/12/08 03:00

orange0190

総合スコア1698

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

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

castail

2015/12/12 08:27

ご回答ありがとうございます。 せっかくですが「tozjp」様をベストアンサーとさせて頂きます。 何卒ご容赦下さいませ。
guest

0

html

1<div class="hoge_parent"> 2 <h4>hoge parent</h4> 3 <div class="hoge_child"> 4 <ul> 5 <li>item</li> 6 </ul> 7 </div> 8</div> 9 10<div class="hoge_parent"> 11 <h4>hoge parent: li is 0</h4> 12 <div class="hoge_child"> 13 <ul> 14 </ul> 15 </div> 16</div> 17 18<div class="hoge_parent"> 19 <h4>hoge parent</h4> 20 <div class="hoge_child"> 21 <ul> 22 <li>item</li> 23 <li>item</li> 24 </ul> 25 </div> 26</div>

上記サンプルコードに対し、下記コードでテスト済です。

javascript

1$(function() { 2 var listLength; 3 // '.hoge_parent' のオブジェクトを取得し、ループ処理します 4 $('.hoge_parent').each(function(index, elm) { 5 // hoge_parent配下のli要素数を取得する 6 listLength = $(this).find('.hoge_child > ul > li').length; 7 // list length がなければ非表示にします 8 if (!listLength) { 9 // 非表示にするだけなら 10 $(this).hide(); 11 // DOMごと削除するなら 12 // $(this).remove(); 13 } 14 }) 15});

投稿2015/12/08 02:58

編集2015/12/08 03:12
ikki57

総合スコア290

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

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

castail

2015/12/12 08:27

ご回答ありがとうございます。 せっかくですが「tozjp」様をベストアンサーとさせて頂きます。 何卒ご容赦下さいませ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問