jQuery设置每行的最大高度

I have a script that searches through some divs on a page, finds the tallest one and sets each div to that height, though i've come unstuck trying to run this function on a row by row basis. I have tried to add an each function per row but to no avail, currently every div gets changed to the tallest of them all.

我有一个脚本搜索页面上的一些div,找到最高的一个并将每个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>

With the jQuery as follows

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

Im 50% of the way there, any help would be greatly appreciated.

我50%的方式,任何帮助将不胜感激。

JSFiddle

The fiddle runs off a button click and the css is for text purposes only.

小提琴按下按钮,css仅用于文本目的。

EDIT

Removed unused classed from the html that were for test purposes only.

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

3 个解决方案

#1

Give your .span4 selectors some context by using the this keyword in your each loops. At the moment, you are setting the height of all of them to the tallest overall.

通过在每个循环中使用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.

#2

Try the following

请尝试以下方法

Demo: 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

The issue is that inside the loop, you're accessing all the elements with $('.items-row .span4'), you need to access only the ones relevant for the current iteration with either find() or $('.span4', this)

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

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

FIDDLE

#1