Question

I have a schedule page我想根据时间块重新格式化。例如：Beatrice在Mon和9和10.我希望将这些时间块组合成浏览器中的1个块。我从文件中读取计划并将其打印到屏幕上。我想用jQ来组合它们。我的思考过程：将每个div与下一个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
});

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

My attempt at combining blocks

Answer 1

在玩了一些代码行之后，事实证明你必须保留最后一个具有相同名称的条目，并将其拉伸以填充空格。工作代码：

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

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

1 个答案: