Как определить высоту трех блоков и на основе высоты задать элементу определенный id на JS/JQuery?

Question

У меня нет знаний в JavaScript, по этому прошу вашей помощи для решения следующей задачи.

Есть три <div> элемента у которых общий <div> родитель. Все <div> элементы с динамической высотой зависящей от внутреннего контента.

Вот структура разметки:

Задача следующая:

1. Определить высоту элементов content-grid__left, content-grid__main и content-grid__right
1. Далее, если высота элементов content-grid__left и/или content-grid__main больше чем высота элемента content-grid__right, то добавлять элементу content-grid__right следующий идентификатор id="primary"

Решение может быть как на чистом JS так и на jQuery.

Заранее огромное спасибо всем за помощь!

P.S. При ответе прошу Вас учитывать мои нулевые знания JS.

P.P.S. Работа в MS IE не важна.

Answer 1

Если правильно понял.
Пример на jQuery:

let cg_left = $('.content-grid__left'),
    cg_main = $('.content-grid__main'),
    cg_right = $('.content-grid__right');
    
$(window).on('resize', setPrimary);

function setPrimary() {
  if(cg_left.height() >= cg_right.height() || cg_main.height() >= cg_right.height()) {
    cg_right.attr('id', 'primary');
  } else cg_right.removeAttr('id');
} setPrimary();

// Для демонстрации работы скрипта
let timerId = setTimeout(function tick() {
  let rand_a = Math.floor(Math.random() * 100),
      rand_b = (Math.floor(Math.random() * 3) - 1);
      
  $('.content-grid > div').eq(rand_b).css('height', rand_a+'vh');
  $('.content-grid > div').eq(rand_b).text('height: '+rand_a+'vh')
  setPrimary(); // для пересчёта
  timerId = setTimeout(tick, 1000); // (*)
}, 1000);

body {
  margin: 0;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto;
  width: 100%;
  height: 100vh;
  grid-gap: 5px;
}

.content-grid > div {
  background: gray;
  height: 10vh;
}

#primary {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content-grid">
  <div class="content-grid__left">height: 10vh</div>
  <div class="content-grid__main">height: 10vh</div>
  <div class="content-grid__right">height: 10vh</div>
</div>

БЛОГ НА HUSL

Как определить высоту трех блоков и на основе высоты задать элементу определенный id на JS/JQuery?

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