jQuery-通过div循环并动态设置高度

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

所以父div总是有类“jointeamPeepWrapper”，那么子div可以很容易地被第一个类“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>

志存高远
只是为了好玩
会谈及；事件

我一直都这么做

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

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

我总是这样

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

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匹配的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)); });

---

绝对有可能。使用与要更新的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)); });

---

我认为这个脚本应该完全适合您的场景

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

---

我认为这个脚本应该完全适合您的场景

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

---

你在父div上循环，而不是子div。啊，你是对的，没有仔细阅读。检查我的编辑。嗨，肖恩-谢谢你的回复-但是看起来你正在这里设置父div高度？您的更改假定左侧始终大于右侧。解析为整数实际上有时很重要，因为某些浏览器（尤其是Firefox）会将浮点高度搞砸。我以前遇到过这个问题，所以我把它们变成整数。我不需要一点点像素！肖恩，我不接受这个答案，因为它不起作用——仅此而已——你的想法帮助我根据我下面的编码答案解决了这个问题；）非常感谢。顺便说一句，我已经重新接受了你的答案；）你在父div上循环，而不是子div。啊，你是对的，没有仔细阅读。检查我的编辑。嗨，肖恩-谢谢你的回复-但是看起来你正在这里设置父div高度？您的更改假定左侧始终大于右侧。解析为整数实际上有时很重要，因为某些浏览器（尤其是Firefox）会将浮点高度搞砸。我以前遇到过这个问题，所以我把它们变成整数。我不需要一点点像素！肖恩，我不接受这个答案，因为它不起作用——仅此而已——你的想法帮助我根据我下面的编码答案解决了这个问题；）非常感谢。顺便说一句，我已经重新接受了你的答案；）有没有可能在一个名为“窗口大小调整”的函数中工作？（我产生幻觉了吗？你以前没有接受其他人的回答吗？）无论如何，这是因为当窗口大小调整时，高度已经设置好了，让我想出一些方法来重置它们。啊，我明白了，我没有产生幻觉，@SeanKendle是对的，不接受他的回答有点粗鲁。因为他正在为你做这件事，我将让他去做，他的解决方案可能比我的解决方案更复杂。它有没有可能在一个名为window resize的函数中工作？（我产生幻觉了吗？你以前没有接受其他人的答案吗？）无论如何，这是因为当窗口调整大小时，高度已经设置好了，让我想点什么来重置它们。啊，我明白我没有产生幻觉，@SeanKendle是对的，不接受他的回答有点粗鲁。因为他正在为你做这件事，我就让他去做吧，他的解决方案可能比我的更为慎重。