时间戳

首页 > 解决方案 > jQ根据周围的div动态设置div的高度

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

问题描述

我有一个计划页面，我想根据时间段重新格式化。例如：Beatrice 在周一 9 点和 10 点。我想将这些时间块组合起来，在浏览器中看起来像 1 个块。我从一个文件中读取日程表并将其打印到屏幕上。我想用 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
});

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

我尝试组合块

标签： jqueryhtmlcss

解决方案

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

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

推荐阅读