jQuery समान ऊंचाई divs

Question

यदि मेरे पास निम्न मार्कअप है;

<div id="container"> 
    <div id="box"> 
    <div id='sameHeight'>One<br>two<br>three</div> 
    <div id='sameHeight'>four</div> 
    <div id='sameHeight'>five</div>   
    <div> 
    <div id="box"> 
    <div id='sameHeight'>four</div> 
    <div id='sameHeight'>six</div> 
    <div id='sameHeight'>seven<br>eight</div> 
    <div> 
</div> 

मैं यह कैसे सुनिश्चित कर सकते हैं कि सभी divs के रूप में "sameHeight" चिह्नित अन्य div में अपने समकक्षों के रूप में एक ही ऊंचाई कर रहे हैं?

मैंने बराबर हाइट्स प्लगइन पर एक नज़र डाली थी, लेकिन यह मानता है कि सभी divs पक्ष एक ही पैरेंट में हैं। मुझे एक ऐसे व्यक्ति की जरूरत है जो माता-पिता को पार कर या माता-पिता को निर्दिष्ट करने की अनुमति दे।

क्या ऐसी कोई चीज़ है या मुझे इसे लिखने की ज़रूरत है?

संपादित

मैं अपने स्पष्टीकरण में थोड़ा भ्रम उत्पन्न की है, इसलिए मुझे आशा है कि यह चीजों को थोड़ा साफ करता है लगता है।

नया मार्कअप देखकर, कंटेनर एक साधारण बॉक्स है।

"बॉक्स" divs तरफ से बैठते हैं।

प्रत्येक समान प्रकाश div उसके माता-पिता के भीतर एक के नीचे बैठता है।

जिस चीज को मैं हल करने की कोशिश कर रहा हूं वह वही है जो प्रत्येक के समान विपरीत ऊंचाई से मेल खाता है।

यह ग्रिड का उपयोग करके मुझे लगता है कि एक ग्रिड की तरह दिखना चाहिए।

मुझे उम्मीद है कि इससे मदद मिलती है।

संपादित 2

यह अब तक क्या मैं के साथ आए हैं है लेकिन वहाँ एक बेहतर तरीका है?

function SetHeights() { 
    var numLines = $('#container>div:eq(0) .sameHeight').length; 

    for (var t = 0; t < numLines; t++) { 
     var leftHeight = $('#container>div:eq(0) .sameHeight:eq(' + t + ')').outerHeight(); 
     var rightHeight = $('#container>div:eq(1) .sameHeight:eq(' + t + ')').outerHeight(); 

     if (leftHeight > rightHeight) { 
      $('#container>div:eq(1) .sameHeight:eq(' + t + ')').css({ height: leftHeight }); 
     } 
     else { 
      $('#container>div:eq(0) .sameHeight:eq(' + t + ')').css({ height: rightHeight }); 
     } 
    } 
} 

Answer 1

सबसे पहले, आप शायद अवगत केवल एक ही तत्व किसी भी एक id विशेषता होनी चाहिए रहे हैं। इसलिए मैंने चयनकर्ताओं को बदल दिया है जैसे कि वे नीचे कक्षाओं के लिए कक्षाएं थीं। भले ही आप डब्ल्यू 3 सी मानकों, ब्राउज़र या जावास्क्रिप्ट एपीआई आदि के बारे में परवाह नहीं कर सकते हैं, इस व्यवहार पर भरोसा कर सकते हैं और भविष्य में या भविष्य में काम नहीं कर सकते हैं।

$(document).ready(function() {  
     $('div.parentDiv > div').each(function() { 

     var $sameHeightChildren = $(this).find('.sameHeight'); 
     var maxHeight = 0; 

     $sameHeightChildren.each(function() { 
      maxHeight = Math.max(maxHeight, $(this).outerHeight()); 
     }); 

     $sameHeightChildren.css({ height: maxHeight + 'px' }); 


    }); 
}); 

नोट: आप उन सभी को उनके माता पिता div के बावजूद एक ही ऊंचाई होना चाहते हैं, यह आप क्या चाहते है।

$(document).ready(function() {  
     var $sameHeightDivs = $('.sameHeight'); 
     var maxHeight = 0; 
     $sameHeightDivs.each(function() { 

      maxHeight = Math.max(maxHeight, $(this).outerHeight()); 

     }); 

     $sameHeightDivs.css({ height: maxHeight + 'px' }); 
}); 

यह उन्हें सबसे लंबे, प्रति पैरेंट div तत्व की ऊंचाई के लिए सेट करेगा।

इसके अलावा, this answer आपको कुछ अन्य विकल्प दिखा सकता है।

नोट भी है कि यदि सामग्री के अंदर फिर से बदल जाता है (जावास्क्रिप्ट के माध्यम से शायद), तो आप इस फिर से फोन, या एक setInterval() में रख जो मैं सिफारिश नहीं करने की आवश्यकता होगी।

Answer 2

<div id='parentDiv'> 
    <div> 
     <div id='sameHeight'>One<br>two<br>three</div> 
     <div id='sameHeight'>four</div> 
     <div id='sameHeight'>five</div>   
    <div> 
    <div> 
     <div id='sameHeight'>four</div> 
     <div id='sameHeight'>six</div> 
     <div id='sameHeight'>seven<br>eight</div> 
    <div> 
</div> 

और JavaScript का उपयोग jQuery लिखने में:

$(document).ready(function() {  
    $("div.parentDiv div div.sameHeight").css({ height: "100px" }); 
}); 

Answer 3

क्यों न केवल एक टेबल का उपयोग करें?

इमो, इस तरह जावास्क्रिप्ट में लेआउट करना टेबल के माध्यम से लेआउट करने से कहीं अधिक बुरा है। यदि उपयोगकर्ता अपने ब्राउज़र का आकार बदलता है तो क्या होता है? आपको आकार बदलने की घटना को कैप्चर करना होगा, लेकिन फिर जब आप आकार बदलते हैं तो आपको एक निश्चित लापरवाही मिलती है जिससे आपकी वेबसाइट अप्रकाशित हो जाती है।