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

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

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

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

jQuery

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

Q&A

解決済

3回答

5975閲覧

親要素と小要素のスタイル属性を判定し処理を行いたい

castail

総合スコア117

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2015/10/23 11:16

編集2015/10/24 01:39

親要素と小要素のスタイル属性が特定の条件の時だけ処理を行いたいです。

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

lang

1<div class="hoge" style="display:block"> 2<dl style="display:none;"></dl> 3<dl></dl> 4<dl style="display:none;"></dl> 5<div class="hoge3" style="display:none;"></div> 6</div>

上記構成で、「hoge」内が「style="display:block"」かつ「dl」の要素が全て「style="display:none"」の時のみ「hoge3」を「 style="display:block;"」に切り替えたいです。

lang

1<div class="hoge" style="display:block"> 2<dl style="display:none;"></dl> 3<dl style="display:none;"></dl> 4<dl style="display:none;"></dl> 5<div class="hoge3" style="display:block;"></div> 6</div>

※ご注意点
・「hoge」要素は同一ページ内に複数あるため、各組ごとに処理したいです。
・「dl」のstyle属性は別のナビゲーションにより動的に切り替わるため、読み込み時の1回のみの処理ではありません。

以上を踏まえた上で、ご教授の程よろしくお願いします。

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

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

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

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

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

guest

回答3

0

"動的に変更する"という箇所から、下記関数を呼び出してもらえば、変更の都度、実行することができます。

function hoge3StyleChangeFunction(){
$('.hoge').each( function(){ // .hogeを上から順番に処理
var hogeDisplay = $(this).css('display');
if(hogeDisplay=='block'){
var allNoneFlag = true;
$(this).find('dl').each( function (){ // .hoge内のdlを上から順番に処理
if($(this).css('display') != 'none') {
// displayがnoneでないものを見つけたらフラグを折りeachから抜ける
allNoneFlag = false;
break;
}
});
if(allNoneFlag){
$(this).find('.hoge3').css({display:'block'})
} else {
$(this).find('.hoge3').css({display:'none'})
}
}
});
/*
setTimeout('hoge3StyleChangeFunction()', '100'); // 自分を0.1秒後に呼び出す
*/
}

もしも"動的に変更する"側は弄れないというのであれば、関数内のコメントを外すと、
一応は動作すると思います。(style変更でこれはあまりやらないほうがいいのですが。)

投稿2015/10/26 03:08

moredeep

総合スコア1507

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

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

0

ベストアンサー

書いた。
以下のソースを適当なところに貼り付けてbuttonをクリックしてテストしてみてください。

html

1<div class="hoge" style="display:block"> 2 <dl style="display:none;">dl-1</dl> 3 <dl style="display:none;">dl-2</dl> 4 <dl style="display:none;">dl-3</dl> 5 <div class="hoge3" style="display:none;">hoge3</div> 6</div> 7<div class="hoge" style="display:block"> 8 <dl style="display:none;">dl-1</dl> 9 <dl>dl-2</dl> 10 <dl style="display:none;">dl-3</dl> 11 <div class="hoge3" style="display:none;">hoge3</div> 12</div> 13<div class="hoge" style="display:block"> 14 <dl style="display:none;">dl-1</dl> 15 <dl style="display:none;">dl-2</dl> 16 <dl style="display:none;">dl-3</dl> 17 <dl>dl-4</dl> 18 <div class="hoge3" style="display:none;">hoge3</div> 19</div> 20 21<button id="btn1">btn1</button> 22<button id="btn2">btn2</button> 23<button id="btn3">btn3</button> 24 25<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 26<script> 27 28// buttonそれぞれが.hogeと連動していて、クリックして適当にdisplayを切り替えるテスト。 29// ようするに、なんかアクションがあってdisplayが切り替わったら、その都度hoge()してやると幸せが訪れる。 30$( function(){ 31 $('button').click( function(){ 32 var index = $('button').index(this) 33 var length = $('.hoge').eq(index).find('dl').length 34 var num = Math.floor( Math.random() * (length+1) ); 35 $('.hoge').eq(index).find('dl').css({display:'none'}); 36 $('.hoge').eq(index).find('dl:nth-child('+num+')').css({display:'block'}); 37 hoge() 38 }) 39}) 40 41//スクリプト本体はここから↓ 42hoge() 43function hoge(){ 44 $('.hoge').each( function(){ // .hogeを上から順番に処理 45 var hogeDisplay = $(this).css('display'); 46 if(hogeDisplay=='block'){ 47 var dlLength = $(this).find('dl').length; 48 var dlDisplayNoneLength = $(this).find('dl[style*="none"]').length; //style直書きでbackground:none;とか組み合わさると破綻(笑) 49 if(dlLength==dlDisplayNoneLength){ 50 $(this).find('.hoge3').css({display:'block'}) 51 } else { 52 $(this).find('.hoge3').css({display:'none'}) 53 } 54 } 55 }); 56}; 57</script>

投稿2015/10/24 07:04

編集2015/10/24 07:27
1000

総合スコア204

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

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

castail

2015/10/28 05:44

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

0

まずは親要素の中身を見て、OKなら子要素を確認。
for文で子要素を1つ1つ確認していき、全てOKならばプロパティ変更。

というようなコードでどうですか?
実装するなら大体以下のような感じです。(雑目ですが)

var src = j$(this); if(src.find("hoge").css('display') == 'block') { var huga = src.find("hoge"); for(var i=0; i<huga.length; i++){ if(i==huga.length-1 && huge.find("hoge2").css('display') == 'none'){ //プロパティ変更処理 } else if (huge.find("hoge2").css('display') != 'none'){ break; } } }

参考:
jQuery で要素の CSS のプロパティの値を取得する方法
http://weble.org/2011/02/21/jquery-get-css-propertie

投稿2015/10/23 11:45

編集2015/10/23 11:46
SKYYFISH

総合スコア654

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

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

castail

2015/10/24 01:56 編集

ご回答ありがとうございます。 試したのですが、うまく動作しませんでした。 表示したいhoge3の指定が無いようですが問題ないでしょうか? 当方プログラムの知識がないため間違っておりましたらご容赦ください。 また、記述に誤りがありました。<dl>にはクラスはございませんでした。申し訳ありません。ですのでhoge2ではなく直接dlを指定した場合で再度ご教授願えないでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問