Get nicht sichtbaren inneren div

Question

Ich habe eine div (parentDivStyle) mit der Position absolute, die meine Eltern Div ist. Dann habe ich 5 Kinder (childDivStyle) Div innerhalb der Elternteil Div mit Position relative. Ich habe die overflow auf das Elternteil div versteckt. Daher sind einige der untergeordneten divs nicht sichtbar. Ich möchte die divs bekommen, die von jquery nicht sichtbar sind. Gibt es irgendeinen Weg?

Ich habe es gegooglet und die meisten der Ergebnisse, die auf "sichtbare" Eigenschaft bezogen, Das ist nicht was ich will. Und ich bevorzuge auch kein Plugin. Irgendwelche Hilfe bitte.

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

Mit this answer über das Abrufen von Koordinaten von Elementen können Sie herausfinden, wo Elemente in Bezug aufeinander stehen. Sobald Sie die Koordinaten des sichtbaren Bereichs kennen, können Sie leicht herausfinden, welche Kindelemente sichtbar sind.

Dies wird Ihnen sagen, ob die Elemente sichtbar sind, und wenn nicht, welche Richtung sie in Bezug auf den Container sind.

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

} 

ich gegabelt Ihre JSFiddle here

Answer 2

Sie die Position des Kindes divs verwenden können, und die Höhe des Mutter wie folgt aus:

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

Die Arbeits Geige: http://jsfiddle.net/3suDz/3/

Hoffe, es hilft.

Answer 3

Sie können jQuery verwenden ist() Funktion, etwa so:

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

Also in Ihrem Fall würden Sie so etwas tun:

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

Answer 4

unten Code Versuchen

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

Wenn die untergeordnete div-Datei ausgeblendet ist, wird sie als wahr oder falsch zurückgegeben.

überprüfen Auf der Geige http://jsfiddle.net/3suDz/4/

Answer 5

Hier ist eine Geige, die die relative Natur des Kindes divs berücksichtigt.Es kondensiert werden kann, aber ich ließ es in Langform, so dass die Logik

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

Wie über diese als Lösung

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 offensichtlich ist

<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")); 

Auf jsfiddle

BTW, wenn Sie ein jQuery-Objekt aus dieser wollen dann die folgende

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

Auch, wenn Sie ein Array zurückgegeben werden soll, anstatt undefiniert, dh still scheitern, wenn das Elternelement nicht oder keine Kinder gefunden wurden.

Dann

elements = []; 

löschen und

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

Und natürlich ändern, um dies alles hängt von Ihnen die korrekte Schreibweise Ihrer CSS Einstellung, da keine Kontrollen für visibility oder overflow gemacht werden, usw.

Wenn Sie CSS-Prüfungen hinzufügen möchten, um Ihre CSS-Arbeit zu überprüfen, können Sie window.getComputedStyle verwenden und den wichtigen Wert überprüfen s.