javascript - 找到 child 的高度，给所有其他 child 最大的高度

Question

我有一些 block 级响应列表。一切都很花花公子，除非其中一个项目比另一个项目有更多的副本。我可以找到最高的 li 并将其高度赋予其他 li - 但我只想将其限制为每个单独的列表。如果用户调整大小但事情变得疯狂，我也想再次执行此操作。以前有人处理过这个吗？谢谢!

HERE is a codepen of what I have so far

/*var largestItem = -1; why negative one instead of 0 ? */

var largestItem = -1;

// I want to make this only affect the children of each list

$(".item-list li").each(function() {

  itemHeight = $('.item-list li').outerHeight();

  $(this).height(itemHeight);

  $('.number').text(itemHeight);

});




$(window).resize(function() {

  console.log("Resize event has happened. I don't know why, but alert is going haywire...");

  // I would like to listen for resize events and run the whole function again... 

});

Answer 1

itemHeight = $('.item-list li').outerHeight();

这里的问题是您正在检查元素集合上的单个值。 jquery 将只返回该集合中第一个的值。另外，你没有记录哪个最高

$('.item-list').each(function(){
    var maxHt=0;

    $(this).children().each(function() {
      /* "this" is the current element*/
      var ht=$(this).outerHeight();       
       maxHt = ht > maxHt ? ht : maxHt;     
    }).height( maxHt);

})