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

Question

[baratov_k]

Здравствуйте уважаемые!

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

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

Структура разметки на скриншоте:

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

1. Определить высоту элементов "content-grid__left", "content-grid__main" и "content-grid__right"

2. Далее, если высота элементов "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

[n1ksON]

if (($('.content-grid__left').height() > $('.content-grid__right').height()) || ($('.content-grid__main').height() > $('.content-grid__right').height())) $('.content-grid__right').attr('id', 'primary');

Comments

[baratov_k]

Спасибо большое. Сейчас буду пробовать.

Скажите пожалуйста, если к данному html файлу уже подключен js файл, я могу добавить этот код прямо в этот файл или нужно в сам html вставлять?

Заранее еще раз благодарю за ответ!

[n1ksON]

baratov_k, можете прям в js, только вставить необходимо в

$(document).ready(function() {
// code
})

или что-то подобное

[baratov_k]

n1ksON, Да, так и сделал. Все заработало. Огромное ВАМ спасибо, за за столь грамотное и рабочее решение без лишней воды.

[baratov_k]

И раз уж Вы мне так помогли можно еще один вопрос по той же задаче?
Если нужно могу создать отдельный вопрос.

Ситуация такова:
Третий блок "content-grid__right" которому мы добавили идентификатор id="primary" имеет две вкладки в виде инпутов, реализованных на чистом CSS.
По умолчанию при загрузке страницы отображается первая вкладка.
Так вот при переключении между вкладками высота блока "content-grid__right" может значительно изменяться.
Само переключение между вкладками производится без перезагрузки страницы и следовательно наш скрипт который мы добавили, определив высоту блока при загрузке страницы после переключения вкладки не знает, что теперь высота блока "content-grid__right" изменилась.

Можете посоветовать решение на JS, которое при нажатии на одну из вкладок будет без перезагрузки страницы заново определять высоту блоков на основе ранее предложенного вами скрипта.
Если конечно такое вообще возможно?

На всякий случай скриншот с разметкой вкладок-инпутов:


Заранее багодарю за ответ!

[n1ksON]

baratov_k, необходимо моё решение добавить в событие, срабатывающее при клике на обе вкладки.
Пример:

$('#right-events-tab').click(() => {
    if (($('.content-grid__left').height() > $('.content-grid__right').height()) || ($('.content-grid__main').height() > $('.content-grid__right').height())) $('.content-grid__right').attr('id', 'primary');
});

[baratov_k]

Спасибо большое!

Я ведь могу добавить это решение в тот же js файл, в который добавил предыдущий ваш код, сразу после него?

[n1ksON]

baratov_k, это можете добавить вместо предыдущего кода. В коде выше написано: при нажатии на первую вкладку изменить высоту третьего блока при определенном условии. Аналогичный код сделайте для второй вкладки, изменив элемент на который происходит клик.

[baratov_k]

Да, добавил и продублировал ту же функцию со вторым идентификатором "right-deposits-tab", но к сожалению не работает.

Если убираю предыдущий код, просто без клика, то тогда вообще при загрузке уже не работает. Предполагаю, что ваше первое решение в любом случае нужно оставить, поскольку мне нужно определять высоту при указанных выше условиях и добавлять идентификатор к элементу не только при нажатии на вкладки, а также при обычной загрузке стрницы с вкладкой по умолчанию. И первое решение отлично этим справлялось)

Может я что накосячил? Но ворде все в точности скопировал и вставил.

[baratov_k]

Может в саму разметку тоже нужно что-то добавить чтобы заработало при кликах?
Напрмер в инпуты или куда еще?

[n1ksON]

baratov_k, аа. Если Вам нужно определять высоту при загрузке, тогда первый код оставить нужно, а затем уже два события с кликами. Идентификатор необходимо поставить того элемента, на который происходит нажатие.

[baratov_k]

Добрый день!
Простите за настойчивость, но у меня никак не срабатывает предложенный код на клик инпутов.
Может подскажите в чем еще может быть проблема? Где еще покопать? Или может есть еще другое решение?
Заранее большое спасибо за помощь!

Это разметка инпутов


Это код в js файле


Первая строка идеально работает и выполняет свою задачу, вторая и третья строка не работают.

Условные классы "content-grid__left", "content-grid__main" и "content-grid__right" заменены на "sticky-left", "sticky-center" и "sticky-right".
Условный идентификатор "primary" заменен на "main-sticky-right".

[n1ksON]

baratov_k, на что именно нажимаете? На input или label?

[baratov_k]

Предполагаю, что нажатие происходит на label
поскольку для .for-tabs-list input установлено display: none;
а для .for-tabs-list label установлено cursor: pointer;

[n1ksON]

baratov_k, в jquery необходимо указать id тех элементов, на которые происходит нажатие. В вашем случае укажите id обоих label.

[baratov_k]

Но насколько моих знаний хватает,
label for="right-events-tab" передает клик самому input id="right-events-tab" type="radio" name="tab"

[baratov_k]

или я ошибаюсь?

[n1ksON]

baratov_k, если не срабатывает на input то попробуйте на label. Не вижу в этом проблемы

[baratov_k]

Дико извиняюсь.
Сейчас проверил в инспекторе при клике идентификатор присаивается, причем как по инпуту так и по лейблу, при заданном коде для инпута.

Но сейчас понял, что проблема в самой логике описанной мною задачи.

Заданный код при определенных условиях, в данном случае если третий блок короче первого или второго присваивает третьему блоку идентификатор, а если он длинее то не присваивает. Тоже самое при кликах.
Но есть следующий сценарий:
Когда при загрузке страницы правый блок короче и ему уже присвоен идентификатор после чего при нажатии на вторую вкладку длина правого блока становится больше левого и центрального и новый идентификатор уже не присваивается благодарю коду на клик по инпуту. Но при этом остается тот же идентификатор который уже был присвоен блоку ранее, при загрузке страницы.

Выходит по логике, данный код при нажатии на инпут должен не только присваивать или не присваивать идентификатор при указанных условиях, но и удалять данный идентификатор, если такой уже был присвоен блоку ранее, при проверке по тем же условиям.

[baratov_k]

n1ksON, Добрый день!
Можно вам написать по делу в телегу?

[n1ksON]

baratov_k, добрый, конечно.