jQuery - 循环遍历Div并动态设置高度

Question

我有一堆DIV，每个DIV都有2个不同高度的DIV，根据其中的内容。我希望使用jQuery循环遍历父div的集合，检查子div并将2个子div中的较短者设置为与较高者相同的高度...可能吗？

所以父div总是有“jointeamPeepWrapper”类，然后子类DIVS可以通过第一个类“blockLHS”和第二个类“blockRHS”轻松识别....

HTML结构是：

<div class="aboutPeepsWrapper jointeamPeepWrapper">
  <div class="aboutPeepsPhotoWrapperLHS wideBlock blockLHS"><img src="biogPhoto.jpg"></div>
  <div class="aboutPeepsTextWrapperRHS greenBG smallBlock blockRHS">
    <div class="aboutPeepsTextInner">
      <h4>Aim high</h4>
    </div>
  </div>
</div>

<div class="aboutPeepsWrapper jointeamPeepWrapper">
  <div class="aboutPeepsTextWrapperLHS halfBlock orangeBG blockLHS">
    <div class="aboutPeepsTextInner">
      <h4>Just for fun</h4>
    </div>
  </div>
  <div class="aboutPeepsPhotoWrapperRHS halfBlock blockRHS"><img src="biogPhoto2.jpg"></div>
</div>

<div class="aboutPeepsWrapper jointeamPeepWrapper">
  <div class="aboutPeepsPhotoWrapperLHS wideBlock blockLHS"><img src="biogPhoto3.jpg"></div>
  <div class="aboutPeepsTextWrapperRHS greenBG smallBlock blockRHS">
    <div class="aboutPeepsTextInner">
      <h4>Talks &amp; events</h4>
    </div>
  </div>
</div>

Answer 1

我一直这样做！

function fixPeepHeight(){
    $(".jointeamPeepWrapper").each(function(){
        var tallestHeight = 0;
        $(this).children("div").each(function(){
            $(this).outerHeight("auto");
            if(parseInt($(this).outerHeight()) > tallestHeight){
                tallestHeight = parseInt($(this).outerHeight());
            }
        });
        $(this).children("div").outerHeight(tallestHeight);
    });    
}

$(document).ready(function(){
  fixPeepHeight();
  $(window).smartresize(function () {      
      fixPeepHeight();
  });
});


/*! Smart Resize */
(function ($, sr) {

    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function (func, threshold, execAsap) {
        var timeout;

        return function debounced() {
            var obj = this, args = arguments;
            function delayed() {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    }
    // smartresize
    jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery, 'smartresize');
/* /Smart Resize */

编辑：将在窗口调整大小上运行：

.ui-menu

Answer 2

我认为此脚本应该完全适用于您的场景

$('.jointeamPeepWrapper').each(function () {
    var blockLHS = $(this).children('.blockLHS');
    var blockRHS = $(this).children('.blockRHS');
    if (blockLHS.height() > blockRHS.height())
        blockRHS.height(blockLHS.height());
    else
        blockLHS.height(blockRHS.height());
});

Answer 3

绝对有可能。使用与要更新的DIV匹配的jQuery选择器。您可能需要在匹配的DIV上运行each两次，一次获得最大高度，第二次将DIV的高度更新为最大高度。 此外，为了更容易识别子DIV，请为每个DIV添加相同的类名。 DIV可以有多个类！

这样的事情：

var nodes = $(#parent).find('.child');
int maxHeight = 0;
nodes.each(function() { Math.max(maxHeight, $(this).css('height')); });
nodes.each(function() { $(this).css('height', maxHeight)); });