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

【问题标题】：jQuery - Loop through Divs and set heights dynamicallyjQuery - 循环遍历 Div 并动态设置高度
【发布时间】：2015-12-23 11:26:34
【问题描述】：

我有一堆 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>

【问题讨论】：

标签： jquery

【解决方案1】：

我一直这样做！

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

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

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 */

【讨论】：

循环遍历父 div，而不是子 div。
啊，你是对的，没有仔细阅读。检查我的编辑。
嗨 Sean - 感谢您的回复 - 但看起来您在这里设置父 div 高度...？
您的更改假定左侧总是大于右侧。解析为整数实际上有时很重要，因为某些浏览器（尤其是 Firefox）搞砸了浮点高度。我之前遇到过这个问题，所以我只是将它们设为整数。我不需要一个像素的一小部分！
肖恩，我不接受这个答案，因为它不起作用 - 仅此而已 - 你的想法帮助我根据下面的编码答案解决了这个问题；）非常感谢。顺便说一句，我已经重新接受了你的回答，因为它的价值；）

【解决方案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());
});

【讨论】：

它有没有可能在一个调用窗口调整大小的函数中工作？
（我是不是产生幻觉了？你之前不是接受过别人的回答吗？）反正是因为窗口调整时高度已经设置好了，让我想办法重新设置一下。跨度>
嗯，我知道我没有产生幻觉，@SeanKendle 是对的，不接受他的回答有点粗鲁。由于他正在为您解决此问题，我会让他自己解决，无论如何，他的解决方案可能比我的更彻底。

【解决方案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)); });

【讨论】：