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

})