基于周围div的JQ动态设置div高度

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (116)

我希望将这些时间块组合起来,使其看起来像浏览器中的一个块。我从一个文件中读取了时间表,并将其打印到屏幕上。我想用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
});

我知道逻辑其实并不存在。我需要找到一个名称,计数与它的名称相同的块数,隐藏这些块并相应地调整高度,并重新设置每个新名称的计数。

提问于
用户回答回答于

不得不保留最后一个同名的条目,并扩展该条目,以填充工作代码的空间:

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

扫码关注云+社区

领取腾讯云代金券