jQuery 3個のアイテムを比較して最大のサイズを追加

Question

3個のボックスのサイズを検出するjQueryスクリプトを実行しました。私は最大のの高さを（それは動作する）検出し、私は3つのボックスに最大のサイズを追加することができます。

ページが読み込まれたときにのみ動作します。私はのサイズをとしますが、console.log(maxHeight)を実行すると、ウィンドウを縮小しても常に同じ値になります。そして、私の箱は収まりません。

私を助けることができますか？

は

$(window).on("resize", function() { 

var maxHeight = 0; 


$('.sliderBlog').each(function(){ 
    var thisH = $(this).height(); 
    if (thisH > maxHeight) { maxHeight = thisH; } 
}); 
$('.sliderBlog').height(maxHeight) 
}).resize(); 

Answer 1

TLで試してみてください。.height("auto")とDRリセット高さ、それらを比較する前に。

.height("auto")で高さをリセットする必要があります。

また、このコードを$(document).ready()にラップすると、DOMが実際に準備ができているときに実行されることがあります。 均等化機能を抽出して、より機能的かつステートレスにすることができました。 this codepenを参照してください。

はJavaScript：

var equalize = function(selector){ 
    var maxHeight = 0; 
    $(selector).each(function(idx,el){ 
    $(el).height("auto"); // resetting height 
    var h = $(el).height(); 
    if (h > maxHeight) { maxHeight = h; } 
    }); 

    $(selector).each(function(idx,el){ 
    $(el).height(maxHeight); 
    }); 
} 

$(document).ready(function(){ 
    equalize(".sliderBlog"); // resize when dom ready 

    // register the resize event listener with debounce 
    $(window).on("resize", function() { 
    setTimeout(function(){ 
     equalize(".sliderBlog"); 
    }, 500); // 500ms debounce before calling the function 
    }); 
}) 

NB：微調整し、あなたのニーズにデバウンス時間。

Answer 2

ありがとうございこれら

$(window).on("resize", function() { 
var maxHeight = 0; 

$('.sliderBlog').each(function(){ 
    var thisH = $(this).height(); 
    if (thisH > maxHeight) { maxHeight = thisH; } 
}); 
$('.sliderBlog').height(maxHeight) 
}); 

Answer 3

2つの異なるサイズ変更メソッドを組み合わせているようです。

$(window).on("resize", function(){});は、DOMイベントリスナーです。

$(selector).resize(function(){});は、あなたが探していることは、あなたが持っているものに近い、いずれにせよjQuery method

です。私はあなたのコードを修正し、デバウンス機能（理由を理解するためにread here）でラップしました。

var setToMax = debounce(function() { 
    var maxHeight = 0; 
    $('.sliderBlog').each(function(){ 
     var thisH = $(this).height(); 
     if (thisH > maxHeight) { 
      maxHeight = thisH; 
     } 
    }); 
    $('.sliderBlog').height(maxHeight) 
}, 250, true); 

window.addEventListener('resize', setToMax); 

function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
}; 

このJSFiddleの機能例を見ることができます。