كيف يمكنني الاحتفاظ متعددة DIVs نفس الارتفاع باستخدام jQuery ؟
سؤال
لدي بعض DIV الكلمات الدليلية مع كميات مختلفة من محتوى النص.
HTML:
<div id="boxes">
<div id="boxone">
<p>...</p>
</div>
<div id="boxtwo">
<p>...</p>
</div>
<div id="boxthree">
<p>...</p>
</div>
<div id="boxfour">
<p>...</p>
</div>
</div>
إنهم في اثنين من تخطيط والعرض على السائل:
CSS:
div#boxes {
width: 100%;
}
div#boxes div {
width: 49.9%;
float: left;
}
أريد لهم كل نفس الارتفاع.
لذا حلقة من خلالها والعثور على ارتفاع أطول واحد.ثم حلقة أخرى تعيين كل منهم إلى هذا الارتفاع.
مسج:
$(function() {
var maxHeight = 0;
$('div#boxes div').each(function(){
if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
});
$('div#boxes div').each(function(){
$(this).height(maxHeight);
});
});
هذا يعمل بشكل جيد إذا كان ارتفاع div لا تحتاج إلى تغيير مرة أخرى.
ولكن يفشل إذا كنت تغيير حجم نافذة المتصفح:
إذا كنت (أ) جعل المتصفح الأوسع ، ثم (ب) ، DIVs على نطاق أوسع ، ثم (ج) النص المحتوى يلتف عدد أقل من مرات ثم (d) بلدي DIVs طويل جدا
إذا كنت (ب) تجعل المتصفح أكثر ضيقا ، ثم (ب) بلدي DIVs على أضيق ، ثم (ج) نص المحتوى يلتف أكثر ، ثم (د) بلدي DIVs قصيرة جدا.
كيف يمكنني سواء (1) تلقائيا حجم DIVs إلى ارتفاع محتواها مثل العادية ، ولكن أيضا (2) الحفاظ على تلك متعددة DIVs نفس الارتفاع ؟
المحلول
التحديث...تماما إعادة كتابة هذا الرد بعد تجريب وإيجاد أخرى ، على ما يبدو طريقة عملية للقيام بذلك:
function sortNumber(a,b) {
return a - b;
}
function maxHeight() {
var heights = new Array();
$('div#boxes div').each(function(){
$(this).css('height', 'auto');
heights.push($(this).height());
heights = heights.sort(sortNumber).reverse();
$(this).css('height', heights[0]);
});
}
$(document).ready(function() {
maxHeight();
})
$(window).resize(maxHeight);
شيء واحد أنا لاحظت أن أي حقا التقريب مشاكل مع 50% واسعة طرحت divs...التقديم كان أفضل بكثير لو غيرت تلك إلى 49%.
هذا مسج يعمل...
// global variables
doAdjust = true;
previousWidth = 0;
// raise doAdjust flag every time the window width changes
$(window).resize(function() {
var currentWidth = $(window).width();
if (previousWidth != currentWidth) {
doAdjust = true;
}
previousWidth = currentWidth;
})
// every half second
$(function() {
setInterval('maybeAdjust()', 500);
});
// check the doAdjust flag
function maybeAdjust() {
if (doAdjust) {
adjustBoxHeights();
doAdjust = false;
}
}
// loop through the DIVs and find the height of the tallest one
// then loop again and set them all to that height
function adjustBoxHeights() {
var maxHeight = 0;
$('div#boxes div').each(function(){
$(this).height('auto');
if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
});
$('div#boxes div').each(function(){
$(this).height(maxHeight);
});
}
نصائح أخرى
بالنسبة للآخرين الذين مثلي ، جئت إلى هنا من خلال البحث في جوجل عن حل:القبضة جزء من الإجابة المقبولة يعمل فقط عند أول div أعلى.لقد جعلت بعض التغييرات على ذلك والآن يبدو أن العمل في جميع الحالات.
var highest = 0;
function sortNumber(a,b) {
return a - b;
}
function maxHeight() {
var heights = new Array();
$('#wrapper2>div').each(function(){
$(this).css('height', 'auto');
heights.push($(this).height());
heights = heights.sort(sortNumber).reverse();
});
highest = heights[0];
$('#wrapper2>div').each(function(){
$(this).css('height', highest);
});
}
$(document).ready(function() {
maxHeight();
})
$(window).resize(maxHeight);
تحقق من هذا البرنامج المساعد مسج التي تسمح لك لمراقبة خاصية CSS مثل الارتفاع.
إذا كنت تريد أن تعمل عند تغيير حجم الخ...تفعل ذلك من هذا القبيل:
function sortNumber(a,b) {
return a - b;
}
var highest = 0;
function maxHeight() {
var heights = new Array();
$('.equalheight div').css('height', 'auto');
$('.equalheight div').each(function(){
heights.push($(this).height());
});
heights = heights.sort(sortNumber).reverse();
highest = heights[0];
$('.equalheight div').css('height', highest);
}
$(document).ready(maxHeight);
$(window).resize(maxHeight);
وجدت هذا الحل إلى أن يكون قليلا أكثر مرتبة على وضعي.يعمل بغض النظر عن شعبة هو أعلى.استنادا إلى هذا العمر كريس Coyier وظيفة في CSS الحيل.
function maxHeight() {
var maxHeight = 0;
$(".container > .post-box").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".container > .post-box").height(maxHeight);
}
$(document).ready(function() {
maxHeight();
}
$(window).bind('resize', function () {
$(".container > .post-box").css('height', 'auto');
maxHeight();
}).trigger('resize');
ومع ذلك ، لم تحتاج إلى ضبط ارتفاع لصناعة السيارات في تغيير الحجم قبل تشغيل الدالة مرة أخرى.لم أكن في حاجة إلى تعيينها في وظيفة الأصلي لأنه كان في css.