获取不可见的内部div

Question

我有一个div（parentDivStyle），位置absolute这是我的父div。然后我有5个孩子（childDivStyle）div在父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

使用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 2

可以使用孩子的div的位置，这样家长的高度：

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

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

希望它能帮助。

Answer 3

您可以使用jQuery的是（）函数，就像这样：

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

你的情况

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

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

Answer 4

试试下面的代码

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

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

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

Answer 5

这里有一个小提琴，考虑到孩子的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 6

这样如何作为溶液

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并检查重要的值秒。