jQuery设置每行最大高度答案

【问题标题】：jQuery set max height per rowjQuery设置每行最大高度
【发布时间】：2014-07-10 15:03:18
【问题描述】：

我有一个脚本可以搜索页面上的一些 div，找到最高的一个并将每个 div 设置为该高度，尽管我在尝试逐行运行此功能时遇到了困难。我尝试为每行添加一个 each 函数，但无济于事，目前每个 div 都更改为所有 div 中最高的。

<div class="items-row">
  <div class="span4"><p>Hello</p></div>
  <div class="span4"><p>Hello</p></div>
  <div class="span4"><p>Hello</p></div>
</div>
<div class="items-row">
  <div class="span4"><p>Hello</p></div>
  <div class="span4"><p>Hello</p></div>
  <div class="span4"><p>Hello</p></div>
</div>

用jQuery如下

$('.items-row').each(function(){
  var h = 0;    
  $('.items-row .span4').each(function(){
    if (h < $(this).height()){
      h = $(this).height();
    }
  });

  $('.items-row .span4').each(function () {
    $(this).css("height", h + 'px');
  });
});

我已经完成了 50%，任何帮助将不胜感激。

JSFiddle

fiddle 通过单击按钮运行，css 仅用于文本目的。

编辑

从 html 中删除了仅用于测试目的的未使用的类。

【问题讨论】：

你已经有了一、二、三等课程，那么为什么不直接做$('.items-row.second .span4' - 或者我没有抓住重点？
抱歉，他们是出于测试目的，我会相应地编辑问题。谢谢。
你可以使用我做的一点 sn-p ：jsfiddle.net/764Re/2 不得不评论一行来实现你想要的。如果是为了学习，就直说吧！生病解释代码。

标签： jquery css html

【解决方案1】：

通过在每个循环中使用 this 关键字为您的 .span4 选择器提供一些上下文。目前，您正在将它们的高度设置为总体最高。

$('button').click(function () {
    $('.items-row').each(function () {

        var h = 0;

        $('.span4', this).each(function () {

            if (h < $(this).height()) {
                h = $(this).height();
            }
        });

        $('.span4', this).each(function () {
            $(this).css("height", h + 'px');
        });
    });
});

JSFiddle Here.

【讨论】：

+1 用于使用 $('.span4', this).each() .. 我没有意识到你可以这样做！（将“this”作为第二个参数传递，因此找到该元素的子结果）
我猜你可以删除最后一个+ 'px'？

【解决方案2】：

试试下面的

演示：jsFiddle

$('button').click(function(){
$('.items-row').each(function(){

    var h = 0;  

    $(this).find('.span4').each(function(){

        if (h < $(this).height()){
             h = $(this).height();
        }
    });

    $(this).find('.span4').each(function () {
        $(this).css("height", h + 'px');
    });
});
});

【讨论】：

【解决方案3】：

问题是在循环内部，您使用$('.items-row .span4') 访问所有元素，您只需要使用find() 或$('.span4', this) 访问与当前迭代相关的元素

$('button').click(function () {
    $('.items-row').each(function () {
        $('.span4', this).css('height',
            Math.max.apply( Math, 
                $.map($('.span4', this), function(x) {
                    return $(x).height();
                })
            )
        );
    });
});

FIDDLE

【讨论】：