获取不可见的内部 div

Question

我有一个位置为 absolute 的 div(parentDivStyle)，这是我的父 div。然后我在父 div 中有 5 个子 (childDivStyle) div，位置为 relative。我已将 overflow 设置为隐藏父 div。所以一些子 div 是不可见的。我想获取 jquery 不可见的 div。有什么办法吗？

我用谷歌搜索了它，大部分结果都与“可见”属性相关，这不是我想要的。而且我也不喜欢任何插件。请帮忙。

CSS

.parentDivStyle {
    overflow:hidden;
    width:300px;
    height:50px;
    position:absolute;
    background:#ccc;
    float:left;
}
.childDivStyle {
    width:100px;
    height:50px;
    position:relative;
    float:left;
    background:red;
    border: 1px solid black;
}

HTML

<div class="parentDivStyle">
<div class="childDivStyle">1</div>
<div class="childDivStyle">2</div>
<div class="childDivStyle">3</div>
<div class="childDivStyle">4</div>
<div class="childDivStyle">5</div>
</div>

JSFIDDLE

Answer 1

您可以像这样使用子 div 的位置和父级的高度：

$('#parent .childDivStyle').each(function(index,div){
    if($(div).position().top > $('#parent').height()) alert($(div).html())
});

工作小提琴：http://jsfiddle.net/3suDz/3/

希望对你有帮助。

Answer 2

使用this answer 获取元素的坐标，您可以确定元素之间的相对位置。一旦知道了可见区域的坐标，就可以很容易地弄清楚哪些子元素是可见的。

这将告诉您元素是否可见，如果不可见，它们相对于容器的方向。

displayCoords = function(element) {
    var rect = element.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);   

    var childElements = element.children;
    for(i = 0; i < childElements.length; i++)
    {
        childRect = childElements[i].getBoundingClientRect();
        console.log(childRect.top, childRect.right, childRect.bottom, childRect.left);  
        if(childRect.top >=  rect.bottom)
            console.log("not visible -- off the bottom of element");
        else if(childRect.left >= rect.right)
            console.log("not visible -- off the right of element");
        else if(childRect.bottom <= rect.top)
            console.log("not visible -- off the top of element");
        else if(childRect.right <= rect.left)
            console.log("not visible -- off the left of element");
    }

}

我 fork 你的 JSFiddle here

Answer 3

试试下面的代码

$('div.parentDivStyle div').each(function(index, element){
            alert(this.offsetTop + $(this).height() > $('div.parentDivStyle').height());
        }); 

如果子 div 被隐藏，则返回 true，否则返回 false。

检查小提琴http://jsfiddle.net/3suDz/4/

Answer 4

这是一个考虑到子 div 的相对性质的小提琴。它可以被压缩，但我把它留得很长，所以逻辑很明显

http://jsfiddle.net/arpTx/18/

$("#p").children().each(
        function(idx, el) { 
            var pos = $(el).position();

            console.log("child " + $(el).text() + " is visible: " + isVisible(pos.left, pos.top));
    });

function isVisible(x, y) {
    var pos = $("#p").position();
    var left = pos.left;
    var right = left + $("#p").width();
    var top = pos.top;
    var bottom = top + $("#p").height();    

    x += left;
    y += top;
    return (x >= left && x < right) && (y >= top && y < bottom); }

Answer 5

如何解决这个问题

CSS

.parentDivStyle {
    overflow:hidden;
    width:300px;
    height:50px;
    position:absolute;
    background:#ccc;
    float:left;
}
.childDivStyle {
    width:100px;
    height:50px;
    position:relative;
    float:left;
    background:red;
    border: 1px solid black;
}

HTML

<div id="parent" class="parentDivStyle">
    <div class="childDivStyle">1</div>
    <div class="childDivStyle">2</div>
    <div class="childDivStyle">3</div>
    <div class="childDivStyle">4</div>
    <div class="childDivStyle">5</div>
</div>

Javascript

function getNotVisible(parentId, childClassName) {
    var parent = document.getElementById(parentId),
        children,
        elements;

    if (parent) {
        children = parent.getElementsByClassName(childClassName);
        if (children) {
            elements = [];
            Array.prototype.forEach.call(children, function (child) {
                var pBounds = parent.getBoundingClientRect(),
                    cBounds = child.getBoundingClientRect();

                if (cBounds.right < pBounds.left || cBounds.left > pBounds.right || cBounds.bottom < pBounds.top || cBounds.top > pBounds.bottom) {
                    elements.push(child);
                }
            });
        }
    }

    return elements;
}

console.log(getNotVisible("parent", "childDivStyle"));

开启jsfiddle

顺便说一句，如果您想要一个 jquery 对象，请执行以下操作

var $hiddens = $(getNotVisible("parent", "childDivStyle"));

此外，如果您希望返回一个数组而不是未定义的数组，即如果父元素不存在或未找到子元素，则静默失败。

然后删除

elements = [];

然后改变

var parent = document.getElementById(parentId),
    children,
    elements = [];

当然，这一切都取决于您正确设置 CSS，因为不会对 visibility 或 overflow 等进行检查。

如果您想添加 CSS 检查，以仔细检查您的 CSS 工作，那么您可以使用 window.getComputedStyle 并检查重要值。

Answer 6

你可以使用 jQuery 的 is() 函数，像这样：

$(element).is(":visible")

所以在你的情况下，你会做这样的事情：

var elems = $(".childDivStyle");
for(var i = 0; i < elems.length; i++)
{
    if(!($(elems[i]).is(":visible")))
    {
        // The element is hidden
    }
}