[英]jQuery How to compare the height of a few div blocks, and apply more of them?
I need to compare the height of 5 blocks of different heights and apply most of them for main block. 我需要比较5个不同高度的块的高度,并将它们中的大多数应用于主块。 I could only turn to compare all of the blocks in order.
我只能依次比较所有块。
var
$content1maintabs = $('.main-tabs .content-1');
$content2maintabs = $('.main-tabs .content-2');
$content3maintabs = $('.main-tabs .content-3');
$content4maintabs = $('.main-tabs .content-4');
$content5maintabs = $('.main-tabs .content-5');
$(window).on( 'load', function() {
content2maintabs = ($content2maintabs.height() > $content1maintabs.height()) ? $content2maintabs.height() : $content1maintabs.height();
content3maintabs = ($content3maintabs.height() > content2maintabs) ? $content3maintabs.height() : content2maintabs;
content4maintabs = ($content4maintabs.height() > content3maintabs) ? $content4maintabs.height() : content3maintabs;
main = ($content5maintabs.height() > content4maintabs) ? $content5maintabs.height() : content4maintabs;
$('.main-tabs .content').height(main);
});
$(window).resize(function(){
content2maintabs = ($content2maintabs.height() > $content1maintabs.height()) ? $content2maintabs.height() : $content1maintabs.height();
content3maintabs = ($content3maintabs.height() > content2maintabs) ? $content3maintabs.height() : content2maintabs;
content4maintabs = ($content4maintabs.height() > content3maintabs) ? $content4maintabs.height() : content3maintabs;
main = ($content5maintabs.height() > content4maintabs) ? $content5maintabs.height() : content4maintabs;
$('.main-tabs .content').height(main);
});
I want to know how to make it more convenient. 我想知道如何使其更方便。
Put one class on all of your content children, so instead of content-1
, content-2
, etc, in your javascript, you could just put content-child
. 在所有内容子级上放置一个类,因此可以在JavaScript中代替
content-1
, content-2
等,而只需将content-child
放置。 Your class
attribute would look like class="content-1 content-child"
, class="content-2 content-child"
, etc. 您的
class
属性看起来像class="content-1 content-child"
, class="content-2 content-child"
等。
You can then do this: 然后,您可以执行以下操作:
$(window).on( 'load', function() {
var largestHeight = 0; //Init height as 0
$('.main-tabs .content-child').each(function() { //Loop through all content-1, content-2, etc
if ($(this).height > largestHeight)
largestHeight = $(this).height();
}
$('.main-tabs .content').height(largestHeight);
});
I would do something like this: 我会做这样的事情:
function setMaxHeight(){
var maxHeight = 0;
$('.main-tabs [class*="content-"]').each(function checkHeight(){
if($(this).height() > maxHeight){
maxHeight = $(this).height();
}
});
$('.main-tabs .content').height(maxHeight);
}
$(setMaxHeight);
$(window).resize(setMaxHeight);
$('.main-tabs')
. $('.main-tabs')
制作元素数组。 After this use array.each to calculate element's height. if(a < element[n].height) a = element[n].height
That will help you to make toyr code shorted. if(a < element[n].height) a = element[n].height
这将帮助您缩短Toyr代码。 PS I think the best help - to explain how code should works and looks like but not the pure code without explaining. PS:我认为这是最好的帮助-解释代码应如何工作并看起来像,但如果不解释,则不是纯代码。
You will want to use a loop to make this more efficient. 您将需要使用循环来提高效率。
You will loop through each child element. 您将遍历每个子元素。 Compare this elements height, with the current tallest.
比较此元素的高度和当前的最高高度。
If it's taller, than the current tallest element. 如果更高,则高于当前的最高元素。 Set this as the new value.
将此设置为新值。
Once you have looped through each element, you will want to globally set the height to all your looped elements, with your tallest tracked height. 遍历每个元素后,您将要全局地将所有循环元素的高度设置为最高的跟踪高度。
jQuery(function($) { var tallest = 0; $('.content').each(function() { var height = $(this).height(); if (height > tallest) { tallest = height; } }); $('.content').height(tallest); });
.content { border: 1px solid #000; display: inline-block; margin: 10px; height: 50px; width: 50px; } .content-1 { height: 80px; } .content-3 { height: 100px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="main-tabs"> <div class="content content-1"></div> <div class="content content-2"></div> <div class="content content-3"></div> </div>
As some of the others mentioned here, try to make your code more manageable by creating functions for things you tend to do repetitively. 就像这里提到的其他一些方法一样,请尝试通过为经常重复执行的操作创建函数来使代码更易于管理。 It makes it easier to maintain in the long run.
从长远来看,它使维护变得更容易。
The only difference i would make to the others suggestions is the use of .outerHeight(true); 我对其他建议的唯一区别是使用.outerHeight(true);。 .
。
This retains the margins and padding of the container you are trying to measure instead of just the innerHeight(no margins or padding) of the element. 这将保留您要测量的容器的边距和填充,而不仅仅是元素的innerHeight(无边距或填充)。
function forceHeights() {
var blocks = $('.main-tabs [class*="content-"]');
var maxHeight = 0;
blocks.each(function(i, elem) {
if ($(this).outerHeight(true) > maxHeight) {
// Grabs margins and padding of container
maxHeight = $(this).outerHeight(true);
}
})
blocks.height(maxHeight);
}
$(window).on('load',function() {
// Run on load to cater for
// images that may adjust container size
forceHeights();
})
$(window).on('resize', function() {
// Timer to delay function from executing if
// window still resizing
if (resizeTimer) {
clearTimeout(resizeTimer); // clear any previous pending timer
}
resizeTimer = setTimeout(forceHeights, 500);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.