Question

我有一个div（parentDivStyle），其位置absolute是我的父div。然后我在父div中有5个子（childDivStyle）div，位置为relative。我已将overflow设置为隐藏的父div。因此，一些儿童div不可见。我想得到jquery看不到的div。有什么办法吗？

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

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

尝试以下代码

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

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

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

Answer 3

这是一个考虑到儿童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 4

这是一个解决方案

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 5

使用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");
    }

}

我分叉你的JSFiddle here

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

得到不可见的内部div

6 个答案: