Как задать условие для высоты блока?

Question

подскажите, как сделать, чтоб если высота блока больше 120px, то блоку добавляется класс. Если меньше, то ничего не происходит. Помогите пожалуйста

$(document).ready(function() {
  var heightBlock = $('.sub-menu').height();
  if (heightBlock > 120) {
    $('.sub-menu').addClass('scroll');
  } else {
    $('.sub-menu').removeClass('scroll');
  }
});

.sub-menu {
background: #e5e5e5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li>144</li>
  <ul class="sub-menu">
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>155</li>
    <ul class="sub-menu">
      <li>123</li>
      <li>123</li>
    </ul>
  </ul>
</ul>

.sub-menu {
background: #e5e5e5;
}

Answer 1

Ошибка в том, что вы тут var heightBlock = $('.sub-menu').height(); один раз получаете высоту элемента (первого из списка), и делаете только одну проверку. А класс уже добавляется всем / или никому.

Нужно перебрать элементы, и высоту каждого сравнивать отдельно:

$(document).ready(function() {
  $('.sub-menu').each(function() {
    if ( $(this).height() > 120 ) {
      $(this).addClass('scroll');
    }
  });
});

.sub-menu { border: 1px solid #045acf; }

.sub-menu.scroll { border: 3px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li>144</li>
  <ul class="sub-menu">
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>155</li>
    <ul class="sub-menu">
      <li>123</li>
      <li>123</li>
    </ul>
  </ul>
</ul>

Answer 2

По селектору - классу, выдает множество объедков(элементов), тебе нужно выбрать к кому обращаться, существуют .first(), .eq() и тд, гугли по твоей необходимости. И\Или можно использовать :first и :nth-child(), тоже полезные css селекторы, которые не занимают новую func of jq(слово через точку со скобками)

+ Перед строкой - меняет строку в число, но лучше использовать parseInt, если ты не уверен в силе земли и тебе не снится власть, которая снилась моему отцу

$(document).ready(()=>{
    const heightBlock = $('.sub-menu:first').height();
    console.log('hb', heightBlock);
    if(heightBlock > 120){
        $('.sub-menu').eq(1).addClass('scroll');
    }else{
        $('.sub-menu').eq(1).removeClass('scroll');
    }
});

.sub-menu{
    background: #e5e5e5;
}
.scroll{
    background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
    <li>144</li>
    <ul class="sub-menu">
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>155</li>
        <ul class="sub-menu">
            <li>123</li>
            <li>123</li>
        </ul>
    </ul>
</ul>

Или тебе нужно динамически? Вроде нет

БЛОГ НА HUSL

Как задать условие для высоты блока?

Ответы (2 шт):