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

<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>