jQuery如何比较几个div块的高度，并应用更多它们？

Question

我需要比较5个不同高度的块的高度，并将它们中的大多数应用于主块。 我只能依次比较所有块。

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

我想知道如何使其更方便。

Answer 1

在所有内容子级上放置一个类，因此可以在JavaScript中代替content-1 ， content-2等，而只需将content-child放置。 您的class属性看起来像class="content-1 content-child" ， class="content-2 content-child"等。

然后，您可以执行以下操作：

$(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);
    });

Answer 2

我会做这样的事情：

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

Answer 3

1. 命名函数将包含您的计算。
2. 在window.load和window.resize上执行此函数-这会使您的代码更短（ 不要重复自己 ）。
3. 使用通用选择器。 如我所见，您可以使用选择器$('.main-tabs')制作元素数组。 之后，使用array.each来计算元素的高度。
4. 使用变量存储元素的最大高度值。 if(a < element[n].height) a = element[n].height这将帮助您缩短Toyr代码。

PS：我认为这是最好的帮助-解释代码应如何工作并看起来像，但如果不解释，则不是纯代码。

Answer 4

您将需要使用循环来提高效率。

---

您将遍历每个子元素。 比较此元素的高度和当前的最高高度。

如果更高，则高于当前的最高元素。 将此设置为新值。

遍历每个元素后，您将要全局地将所有循环元素的高度设置为最高的跟踪高度。

 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> 

Answer 5

就像这里提到的其他一些方法一样，请尝试通过为经常重复执行的操作创建函数来使代码更易于管理。 从长远来看，它使维护变得更容易。

---

我对其他建议的唯一区别是使用.outerHeight（true）;。 。

这将保留您要测量的容器的边距和填充，而不仅仅是元素的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);

})