7

我有一个 div(parentDivStyle) 位置absolute是我的父 div。然后我在父 div 中有 5 个 children(childDivStyle) div，其中 position 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

4

6 回答 6

3

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

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

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

希望能帮助到你。

于 2013-05-10T13:22:09.743 回答
1

试试下面的代码

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

如果子 div 被隐藏，那么它将返回 true，否则返回 false。

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

于 2013-05-10T13:27:47.453 回答
1

这是一个考虑到子 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); }
于 2013-05-10T13:48:55.737 回答
1

这个作为解决方案怎么样

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，因为没有检查visibilityoroverflow等​​。

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

于 2013-05-10T16:09:59.870 回答
1

使用这个关于获取元素坐标的答案，您可以找出元素相对于彼此的位置。一旦你知道了可见区域的坐标，你就可以很容易地找出哪些子元素是可见的。

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

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

于 2013-05-10T16:29:43.107 回答
-1

您可以使用 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
    }
}
于 2013-05-10T13:24:35.790 回答