Question

我有一个div，我根据用户输入使用jQuery函数.hide()或.show()。

我遇到了一个问题，即问题中的div在应该显示时没有显示出来。处理不会抛出任何错误，但div仍然不可见。我已经对div做了很多测试，似乎应该可见！

测试如下所示。

我的问题是什么是从有问题的div“走出”到DOM的顶端的好方法？

我想在一些诊断代码中执行此操作，以便我可以检查每个包含元素的可见性，以防有什么东西导致它保持不可见。我真的不明白为什么会这样，但我的想法已经不多了。

编辑1：测试中的循环只是一个双重检查，即只有元素元素的ID为'fanlist'。输出确认了这种情况，但这就是循环存在的原因。

编辑2：我将看一下暴露HTML的实用性，但我觉得我现在不能这样做。

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

使用jQuery的.parents（）函数，您可以遍历父项。

请参阅以下示例：

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

我希望这就是你要找的东西。： - ）

如何检查所有父元素的可见性？

1 个答案: