How to check visibility of all parent elements?

Question

I have a div which I use the jQuery functions to .hide() or .show() depending on the user inputs.

I've got a problem where the div in question doesn't get revealed when it should. The processing doesn't throw any errors but the div remains invisible. I've done a number of tests on the div and it seems that it should be visible!

The tests are shown below.

My question is what is a good way to 'walk' up from the div in question to the top of the DOM?

I want to do this in some diagnostics code so I can check visibility of each of the containing elements in case there's something there which is causing it to remain invisible. I really can't see why there should be but I'm running out of ideas.

EDIT 1 : The loop in the tests was just a double check that there was only element element with the ID of 'fanlist' . The output confirms this is the case but that's why the loop is there.

EDIT 2: I will have a look at the practicalities of exposing the HTML but I don't feel I can do this right now.

EDIT 3: Here is the output from the diagnostic code on an occassion when the div is not visibly rendered:

Here's the existing tests which are based on this question How do I check if an element is hidden in jQuery?.

fanlistVisDiagnostics: function () {
    if ($('#fanlist').is(':visible')) {
        console.log("C fanlist is visible")
    } else {
        console.log("C fanlist is not visible")
    }
    console.log("1DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD");
    console.log("D fanlist offset.top = " + $("#fanlist").offset().top);
    console.log("2DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD");
    if( $("#fanlist").offset().top > 0 ){
        console.log("D fanlist is visible")
    }else{
        console.log("D fanlist is not visible")
    }
    console.log("1EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE");
    console.log($("#fanlist").css('display'));
    console.log("2EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE");
    if ( $("#fanlist").css('display') == 'none' ){
        console.log("E fanlist is not visible")
    }else{
        console.log("E fanlist is visible")
    }
    console.log("*************************************************");
    console.log("*ABout to iterate over the #fanlist return*******");
    console.log("*************************************************");
    $.each($("#fanlist"), function (id, varFanListFirstElement) {
        console.log("*************************************************");
        console.log("*Processing " + id +  " *************************");
        console.log("*************************************************");
        console.log("1DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD");
        console.log("D fanlist offset.top = " + $(varFanListFirstElement).offset().top);
        console.log("2DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD");
        console.log("1EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE");
        console.log($(varFanListFirstElement).css('display'));
        console.log("2EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE");
    });
},

Just check why it's not visible in inspector in devtools, much simpler then all your javascript. — dfsq, Dec 04 '16 at 22:45
Can you include `html` at Question? What is purpose of `$.each($("#fanlist"), function(){})`? Is there more than one element at `html` which has `id` set to `"fanlist"`? — guest271314, Dec 04 '16 at 22:47
@guest271314 : Thanks for your response. I'll edit the question to provide answers. I can't very easily include the entire html I'm afraid. — glaucon, Dec 04 '16 at 23:05
@glaucon Note, `id` of element in `document` should be unique. — guest271314, Dec 04 '16 at 23:14
@guest271314 : Thanks for your response. I can confirm there is only element with an id of 'fanlist' . I will add the output from the diagnostic code in a moment as an edit to the question. — glaucon, Dec 04 '16 at 23:19

score 1 · Accepted Answer · answered Dec 04 '16 at 23:19

With jQuery's .parents() function you can iterate through the parents.

See the following example:

$(function() {
    var parentEls = $( "#Target" ).parents().map(function() {
        var id = $(this).attr("id");
        console.log(this.tagName +" "+ id + " is " + $(this).css("visibility"));
    });
});

div {
    border:#999 1px solid;
    padding:1em;
    margin:1em;
}

#Target {
    background-color:#FC9;
}

#A_A_A {
    visibility:hidden;
}

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

<div id="A">
    <div id="A_A"></div>
    <div id="A_B">
        <div id="A_A_A">
            <div id="A_A_A_A">
            </div>
            <div id="A_A_A_B">
                <div id="Target"></div>
            </div>
        </div>
    </div>
</div>

This will return something like:

DIV A_A_A_B is hidden
DIV A_A_A is hidden
DIV A_B is visible
DIV A is visible
BODY undefined is visible
HTML undefined is visible

I hope this is what you are looking for. :-)

Great that's exactly what I was after thanks. I did know about parents but you've used in a much useful way than I knew about . Thank you, I will try it out. — glaucon, Dec 04 '16 at 23:24

How to check visibility of all parent elements?

1 Answers1