嵌套块的高度总和

【问题标题】：Sum of heights of nested blocks嵌套块的高度总和
【发布时间】：2021-06-28 04:47:37
【问题描述】：

有一段代码

<div class="FilterDropdown__body FilterDropdown__body_opened" style="height: 246px;">
  <div class="FilterGroupNewDesign">
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821acer"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">ACER</span><sup class="FilterLabelNewDesign__counter">82</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821apple"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">APPLE</span><sup class="FilterLabelNewDesign__counter">34</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821asus"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">ASUS</span><sup class="FilterLabelNewDesign__counter">75</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821dell"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">DELL</span><sup class="FilterLabelNewDesign__counter">47</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821hp"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">HP</span><sup class="FilterLabelNewDesign__counter">82</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821iru"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">IRU</span><sup class="FilterLabelNewDesign__counter">32</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821lenovo"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">LENOVO</span><sup class="FilterLabelNewDesign__counter">78</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821msi"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">MSI</span><sup class="FilterLabelNewDesign__counter">16</sup></div>
        </div>
      </div>
    </div>
  </div><button class="FilterGroupNewDesign__filter_show-all linkStyleDecorator linkStyleDecorator_size_s linkStyleDecorator_colored linkStyleDecorator_theme_blue Button" name="" type="submit" value="" tabindex="0"><span class="linkStyleDecorator__text linkStyleDecorator__text_border_none">Показать все</span></button></div>

在FilterDropdown__body FilterDropdown__body_opened 块内有一个 FilterGroupNewDesign 块和一个&lt;button class =" FilterGroupNewDesign__filter_show-all linkStyleDecorator linkStyleDecorator_size_s linkStyleDecorator_collerator_collerator "name= "linkStyleDecorator__text linkStyleDecorator__text_border_none"&gt; Show All &lt;/span&gt; &lt;/button&gt; 。使用命令

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    $("div.FilterGroupNewDesign").each(function() {
                let $div=$(this);
                $div.parent().css("height", /*sum of heights of block FilterGroupNewDesign and button*/);
    });

我想让FilterDropdown__body FilterDropdown__body_opened 块的高度等于 FilterGroupNewDesign 块的高度加上按钮button 的高度。如何添加（如何引用按钮）button 的高度？

【问题讨论】：

  • 由于所有元素都已经在您的容器中，它应该是正确的高度。只要你不通过内联 CSS 添加height：style="height: 246px;"
  • @Reyno 如何添加按钮的高度？

标签： javascript html jquery css web


【解决方案1】： 

$(".FilterDropdown__body").height($(".FilterDropdown__body")[0].scrollHeight);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="FilterDropdown__body FilterDropdown__body_opened" style="height: 246px;">
  <div class="FilterGroupNewDesign">
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821acer"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">ACER</span><sup class="FilterLabelNewDesign__counter">82</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821apple"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">APPLE</span><sup class="FilterLabelNewDesign__counter">34</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821asus"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">ASUS</span><sup class="FilterLabelNewDesign__counter">75</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821dell"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">DELL</span><sup class="FilterLabelNewDesign__counter">47</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821hp"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">HP</span><sup class="FilterLabelNewDesign__counter">82</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821iru"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">IRU</span><sup class="FilterLabelNewDesign__counter">32</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821lenovo"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">LENOVO</span><sup class="FilterLabelNewDesign__counter">78</sup></div>
        </div>
      </div>
    </div>
    <div class="FilterGroupNewDesign__filter-item FilterLabelNewDesign">
      <div class="checkboxStyleDecoratorNewDesign checkboxStyleDecoratorNewDesign_size_m checkboxStyleDecoratorNewDesign_hoverable">
        <div class="FilterCheckbox FilterCheckbox_hoverable"><input type="checkbox" class="FilterCheckbox__input" name="8714_821msi"><span class="checkboxStyleDecoratorNewDesign__checkmark FilterCheckbox__checkmark"></span></div>
        <div class="checkboxStyleDecoratorNewDesign__title">
          <div class="FilterLabelNewDesign"><span class="FilterLabelNewDesign__name">MSI</span><sup class="FilterLabelNewDesign__counter">16</sup></div>
        </div>
      </div>
    </div>
  </div><button class="FilterGroupNewDesign__filter_show-all linkStyleDecorator linkStyleDecorator_size_s linkStyleDecorator_colored linkStyleDecorator_theme_blue Button" name="" type="submit" value="" tabindex="0"><span class="linkStyleDecorator__text linkStyleDecorator__text_border_none">Показать все</span></button></div>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-11-09
    • 2023-04-11
    • 1970-01-01
    • 2013-08-20
    • 2018-01-07
    • 2019-08-04
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode