jeudi 1 avril 2021

Sum of heights of nested blocks

There is a block of code

<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>

Inside the FilterDropdown__body FilterDropdown__body_opened block there is a FilterGroupNewDesign block and a <button class =" FilterGroupNewDesign__filter_show-all linkStyleDecorator linkStyleDecorator_size_s linkStyleDecorator_collerator_collerator "name= "linkStyleDecorator__text linkStyleDecorator__text_border_none"> Show All </span> </button> . Using the command

    <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", /*сумма высот блока FilterGroupNewDesign и кнопки button*/);
    });

I want to make the height of the FilterDropdown__body FilterDropdown__body_opened block equal to the height of the FilterGroupNewDesign block plus the height of the button button. How do I add (how to refer to the button) the height of the button?




Aucun commentaire:

Enregistrer un commentaire