将 div 的高度设置为下一个同级 div 和 jQuery 的高度

Question

编辑： 问题缩短了

我有两个 div 是兄弟姐妹。当 window 为移动设备调整大小时，第二个 div 的高度会发生变化（div 中的一行文本分成两行）。

现在我想根据第二个div的高度设置第一个div的高度。

在我的情况下，我不能依赖以下条件：

div只有类所以我不能使用getelelementbyid()
将 table / table-cell 添加到容器中，并且两个 div 都不会工作，因为 [=] 的切换52=]s 将不再打开
由于开关的功能，我无法让第一个 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>

这段代码不起作用，我不知道为什么，你能帮我解决这个问题吗？

谢谢！

Answer 1

您可以将 callback 传递给 height 方法，其中 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>

将 div 的高度设置为下一个同级 div 和 jQuery 的高度

Set div's height like height of next sibling div with jQuery

html

jquery

height

siblings