गैर दृश्यमान आंतरिक div

Question

प्राप्त करें मेरे पास absolute स्थिति वाला एक div (parentDivStyle) है जो मेरा मूल div है। उसके बाद मेरे पास 512 बच्चे (childDivStyle) div पैरेंट div के अंदर relative स्थिति के साथ है। मैंने पैरेंट div के छिपाने के लिए overflow सेट किया है। तो कुछ बच्चे divs दिखाई नहीं दे रहे हैं। मैं divs प्राप्त करना चाहता हूं जो jquery द्वारा दिखाई नहीं दे रहे हैं। क्या कोई रास्ता है?

मैंने इसे गुमराह किया है और अधिकांश परिणाम "दृश्यमान" संपत्ति से संबंधित हैं, यही वह नहीं है जो मैं चाहता हूं। और मैं भी किसी भी प्लगइन पसंद नहीं कर रहा हूँ। कृपया कोई मदद करें।

सीएसएस

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

एचटीएमएल

<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

आप बच्चे divs की स्थिति का उपयोग कर सकते हैं और इस तरह से माता-पिता की ऊंचाई:

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

काम कर रहे बेला: http://jsfiddle.net/3suDz/3/

आशा है कि यह मदद करता है।

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

अपने मामले में

तो, आप कुछ इस तरह करना होगा::

Answer 3

आप jQuery के उपयोग कर सकते हैं() फ़ंक्शन, इसलिए की तरह है

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 छुपा हुआ है तो यह और भी गलत होगा। बेला http://jsfiddle.net/3suDz/4/

Answer 5

पर

चेक यहाँ एक बेला उस खाते में बच्चे divs के रिश्तेदार प्रकृति लेता है।यह सघन किया जा सकता है, लेकिन मैं लंबे समय से फार्म में छोड़ दिया तो तर्क स्पष्ट है

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

यह कैसे एक समाधान के रूप

सीएसएस

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

एचटीएमएल

के बारे में

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

जावास्क्रिप्ट

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

Btw, आप इस से एक jQuery वस्तु चाहते हैं, तो उसके बाद निम्न

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

इसके अलावा, अगर आप चाहते हैं एक सरणी बल्कि अपरिभाषित से लौट आए हैं, यानी चुपचाप असफल हो अगर पैरेंट तत्व नहीं है या कोई बच्चा नहीं मिला है।

तो हटाना

elements = []; 

और बदल

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

और निश्चित रूप से यह सब आप पर निर्भर करता है, सही ढंग से अपने सीएसएस सेटिंग के रूप में कोई भी चेक visibility या overflow के लिए किए जा रहे हैं, आदि

यदि आप अपने सीएसएस काम को दोबारा जांचने के लिए सीएसएस चेक जोड़ना चाहते हैं, तो आप window.getComputedStyle का उपयोग कर सकते हैं और महत्वपूर्ण मूल्य की जांच कर सकते हैं रों।