Как проверить видимость всех родительских элементов?

Question

У меня есть div, который я использую функции jQuery для .hide() или .show() в зависимости от пользовательских входов.

У меня проблема, когда вопрос о дивизионе не выясняется, когда он должен. Обработка не вызывает ошибок, но div остается невидимым. Я сделал несколько тестов на div, и кажется, что это должно быть быть видимым!

Испытания показаны ниже.

Мой вопрос - это хороший способ «пройти» от вопроса div к вершине DOM?

Я хочу сделать это в некотором диагностическом коде, чтобы я мог проверять видимость каждого из содержащихся элементов в случае, если есть что-то, что заставляет его оставаться невидимым. Я действительно не понимаю, почему должно быть, но у меня заканчиваются идеи.

---

EDIT 1: Петля в тестах была просто двойная проверка, что существует единственный элемент элемент с идентификатором «fanlist». Результат подтверждает, что это так, но именно поэтому цикл существует.

EDIT 2: Я посмотрю на практичность разоблачения HTML, но я не чувствую, что могу это сделать прямо сейчас.

EDIT 3: Вот выход из диагностического кода на отдельных случаях, когда DIV не заметно вынесено:

---

Вот существующие тесты, основанные на этом вопросе 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"); 
    }); 
}, 

Answer 1

С помощью функции .parents() jQuery вы можете проходить через родителей.

Смотрите следующий пример:

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

Это будет возвращать что-то вроде:

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 

Я надеюсь, что это то, что вы ищете. :-)