0

подскажите, как сделать, чтоб если высота блока больше 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;
}
1
  • Исправил, мне нужно добавить класс только, если высота .sub-menu больше 120px. А в остальных не добавлять класс
    – Dha.t.Elle
    17 апр 2020 в 21:31

2 ответа 2

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>

3
  • 21 век, 2020 год, берем палку... вернее: берём полную коробку, из неё достаем все вещи и измеряем их, ииии... та - дам, получили размер коробки)
    – Vadim
    17 апр 2020 в 22:26
  • @Vadim ну может я не так понял вопрос, кажется аффтар хотел каждому такому классу на странице добавлять / удалять второй класс, в зависимости от его размеров... 17 апр 2020 в 22:28
  • Согласен - не паняна
    – Vadim
    18 апр 2020 в 12:53
0

По селектору - классу, выдает множество объедков(элементов), тебе нужно выбрать к кому обращаться, существуют .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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.