Question

我有一个脚本搜索页面上的一些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

小提琴按下按钮，css仅用于文字目的。

修改的

删除了仅用于测试目的的未使用的分类。

Answer 1

在每个循环中使用.span4关键字为您的this选择器提供一些上下文。目前，您将所有这些高度设置为最高的整体。

$('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

Answer 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');
    });
});
});

Answer 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

jQuery设置每行的最大高度

3 个答案: