jquery - jQ根据周围的div动态设置div高度

Question

I have a schedule page我想根据时间 block 重新格式化。例如:比阿特丽斯在周一 9 点和 10 点。我想将这些时间 block 组合起来，在浏览器中看起来像 1 个 block 。我从文件中读取时间表并将其打印到屏幕上。我想用 jQ 来组合它们。我的思考过程:将每个 div 与下一个进行比较，如果它们相同； cnt 上升，我隐藏重复的条目，并使第一个条目的高度覆盖所有重复项。

到目前为止，我所拥有的是:

var cnt = 1;
$('.sched-col').each(function(){ //for each column
  $(this).find('.worker').each(function(){ //look for each time block
    if ($(this).html() == $(this).next().html()) { //if block is the same as the next
      cnt++; //increase the count
      $(this).next().css('display', 'none'); //hide the following block
      $(this).css('height', boxH * cnt); //adjust height to cover following block
    }
  });
  cnt = 1; //reset counter for new column
});

我知道逻辑实际上并不存在。我需要找到一个名称，计算其下具有相同名称的 block 的数量，隐藏这些 block 并相应地调整高度，并为每个新名称重置计数。我只需要一些帮助来将其放入代码中。

My attempt at combining blocks

Answer 1

在尝试了一些代码行之后，结果发现您必须保留最后一个具有相同名称的条目，并拉伸(stretch)那个条目以填充空间工作代码:

var boxH = $('.worker').outerHeight();

var cnt = 1; //initial count of first name encounter
$('.sched-col').each(function(){ //for each column
  $(this).find('.worker').each(function(){ //find the worker blocks
    if ($(this).html() == $(this).next().html()) { //if next block is same name
      cnt++; //increase count
      $(this).css('display', 'none'); //remove the current block
    }
    else { //two blocks are not the same name
      $(this).css('height', boxH * cnt); //stretch to cover duplicate block spaces
      cnt = 1; //reset count
    }
  });
});