Установите высоту div как высоту следующего родственного div с помощью jQuery

EDIT: Вопрос сокращен.

У меня есть два div рядом друг с другом, которые являются братьями и сестрами. Высота второго элемента div изменяется при изменении размера окна для мобильных устройств (одна строка текста внутри элемента div разбивается на две строки).

Теперь я хочу установить высоту первого div в соответствии с высотой второго div.

В моем случае есть следующие условия, на которые я не могу полагаться:

  • у div есть только классы, поэтому я не могу использовать getelementbyid()

  • добавление таблицы / table-cell в контейнер, и оба div не будут работать, потому что переключатель, для которого предназначены div, больше не откроется

  • Я не могу сделать первый div дочерним элементом второго div из-за функциональности переключателя

Итак, я решил сделать это с помощью jQuery, и у меня есть следующий код:

$(document).ready(function(){

$(".toggle-info").height($(this).next().outerHeight());
  
});
.toggle-info {
  float:right;
  width:50px;
  text-align:center;
  background: green;
}

.toggle-trigger {
  display: block;
  position: relative;
  border: 0;
  outline: 0;
  margin: 0 50px 0 0; 
  background: green;
}
  <div class="toggle-info">first div with info-icon</div>
  <div class="toggle-trigger"><a href="#">second div with toggle headline</a></div>

Этот код не работает, и я не знаю, почему, вы можете помочь мне с этим?

Спасибо!


html jquery height siblings
person Thorin    schedule 30.06.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете передать обратный вызов методу высоты, внутри которого this будет ссылаться на текущий toggle-info, поэтому вы можете использовать $(this).next().outerHeight() внутри обратного вызова, чтобы получить высоту следующего брата

$(document).ready(function() {

  $(".toggle-info").height(function() {
    return $(this).next().outerHeight()
  });

});
.toggle-info {
  float: right;
  width: 50px;
  text-align: center;
  background: green;
  overflow: hidden;<!--To hide overflow content-->
}
.toggle-trigger {
  display: block;
  position: relative;
  border: 0;
  outline: 0;
  margin: 0 50px 0 0;
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toggle-info">first div with info-icon</div>
<div class="toggle-trigger"><a href="#">second div with toggle headline</a></div>
<br />
<div class="toggle-info">first div with info-icon</div>
<div class="toggle-trigger" style="height: 54px;"><a href="#">second div with toggle headline</a></div>

person Arun P Johny    schedule 30.06.2015
comment
Ваш пример отлично работает, спасибо! :) Извините, я забыл упомянуть, что внутри переключателей тоже есть переключатели и для этих так называемых суб-переключателей код не работает. У вас есть идея, в чем проблема? - person Thorin; 30.06.2015
comment
Помогите, пожалуйста, со второй частью моего вопроса. ;) Я пытаюсь выяснить, почему код не работает для суб-переключателей внутри верхнего переключателя. Все переключатели по умолчанию закрываются при загрузке страницы. Теперь, когда я меняю $(document).ready(function()) на $(window).scroll(function()), кажется, что высота адаптирована правильно, в том числе и для вспомогательных переключателей. Мне кажется, что как-то исходный код по каким-то причинам не доходит до скрытых при загрузке страницы подпереключателей, может быть такое? - person Thorin; 30.06.2015
comment
можете ли вы поделиться образцом html, вызывающим проблему - person Arun P Johny; 30.06.2015
comment
jsfiddle.net/arunpjohny/wz82kkhb/1 — отредактируйте эту скрипту, чтобы показать свою проблему - person Arun P Johny; 30.06.2015
comment
Спасибо. Я обновил скрипку, и она работает, но не на моем тестовом сайте, она работает только для переключателей, которые видны при загрузке страницы. Когда я открываю эти верхние переключатели, подпереключатели не меняются. Дело в том, что когда функция вызывается снова после того, как подпереключатели становятся видимыми (например, при прокрутке окна; проверено), эти стили также меняются. Мне нужно найти способ получить доступ ко всем переключателям за один вызов функции, если все мое предположение верно. - person Thorin; 30.06.2015
comment
@Thorin после внесения изменений вам нужно нажать кнопку обновления, которая даст вам обновленный URL-адрес. - person Arun P Johny; 30.06.2015
comment
@Thorin, чтобы предложить любую помощь, нам нужно будет увидеть разметку, поэтому лучше поделиться обновленным URL-адресом скрипки. - person Arun P Johny; 30.06.2015
comment
@Thorin, загружаются ли эти внутренние элементы динамически в вашем случае .... попробуйте добавить ведение журнала консоли, чтобы увидеть, выполняется ли скрипт для внутренних элементов .... например jsfiddle.net/arunpjohny/wz82kkhb/10 — затем перейдите в консоль браузера - person Arun P Johny; 30.06.2015
comment
Хорошо, спасибо! Я тупой. :) Вот он: jsfiddle.net/Thorin2/wz82kkhb/11 - person Thorin; 30.06.2015
comment
Хорошо, спасибо, я сделал это. На моем сайте теперь четыре внешних элемента (верхние переключатели :) ), и это в журнале консоли после загрузки страницы: 44, 0, 44, 0, 44, 0, 44. Каждое число находится в новой строке. Я не знаю, что означают эти цифры, но почему-то похоже, что скрипт выполняется только для четырех внешних элементов, верно? - person Thorin; 30.06.2015
comment
@Thorin это не решение, но попробуйте jsfiddle.net/arunpjohny/wz82kkhb/12 - person Arun P Johny; 30.06.2015
comment
Большое Вам спасибо. Я пробовал, но это не работает. Я заменил исходный код переключателя из плагина вашим кодом, чтобы проверить его, но ни одна из информации о переключателе не меняет высоту. Вот код js, который используется подключаемым модулем переключения, когда он выполняется на моем сайте: jsfiddle.net /Торин2/wz82kkhb/13 . Я добавил оператор if else для прокрутки вверх, если открывается переключатель. А вот тот же код с добавленным вашим кодом: jsfiddle.net/Thorin2/wz82kkhb/15 скрипка работает, но не с моей стороны, и я понятия не имею :/ - person Thorin; 30.06.2015
comment
Для тех, кто заинтересован в этих комментариях и хотел бы знать, каков мой результат, вот мой обходной путь: я вызываю функцию при загрузке окна, изменении размера окна и щелчке триггера переключения: $(window).on(load resize ,function(e){ $(.toggle-info).height(function() { return $(this).next().outerHeight() }); $('.trigger-top').on('click ',function(){ setTimeout(function(){ $(.toggle-info).height(function() { return $(this).next().outerHeight() }); }, 1); }); }); Это не очень приятно, но делает то, что должно. - person Thorin; 01.07.2015