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

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

ただいまの
回答率

88.32%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,469

castail

score 125

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

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

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

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

以上を踏まえた上で、ご教授の程よろしくお願いします。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

0

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

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

<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

// buttonそれぞれが.hogeと連動していて、クリックして適当にdisplayを切り替えるテスト。
// ようするに、なんかアクションがあってdisplayが切り替わったら、その都度hoge()してやると幸せが訪れる。
$( function(){
    $('button').click( function(){
        var index = $('button').index(this)
        var length = $('.hoge').eq(index).find('dl').length
        var num = Math.floor( Math.random() * (length+1) );
        $('.hoge').eq(index).find('dl').css({display:'none'});
        $('.hoge').eq(index).find('dl:nth-child('+num+')').css({display:'block'});
        hoge()
    })
})

//スクリプト本体はここから↓
hoge()
function hoge(){
    $('.hoge').each( function(){ // .hogeを上から順番に処理
        var hogeDisplay = $(this).css('display');
        if(hogeDisplay=='block'){
            var dlLength = $(this).find('dl').length;
            var dlDisplayNoneLength = $(this).find('dl[style*="none"]').length; //style直書きでbackground:none;とか組み合わさると破綻(笑)
            if(dlLength==dlDisplayNoneLength){
                $(this).find('.hoge3').css({display:'block'})
            } else {
                $(this).find('.hoge3').css({display:'none'})
            }
        }
    });
};
</script>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/10/28 14:44

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

    キャンセル

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/24 10:43 編集

    ご回答ありがとうございます。

    試したのですが、うまく動作しませんでした。
    表示したいhoge3の指定が無いようですが問題ないでしょうか?

    当方プログラムの知識がないため間違っておりましたらご容赦ください。

    また、記述に誤りがありました。<dl>にはクラスはございませんでした。申し訳ありません。ですのでhoge2ではなく直接dlを指定した場合で再度ご教授願えないでしょうか?

    キャンセル

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変更でこれはあまりやらないほうがいいのですが。)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 88.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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