獲取不可見的內部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並檢查重要的值秒。