使用jQuery设置di​​v的高度，就像下一个兄弟div的高度一样

Question

编辑：问题已缩短

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

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

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

• div只有类，所以我不能使用getelelementbyid（）

• 将一个表/表格单元格添加到一个容器中，两个div都不会起作用，因为用于div的内容的切换不再打开

• 由于切换功能，我不能让第一个div成为第二个div的孩子

所以我的猜测是用jQuery做的，我有以下代码：

＆＃13;

＆＃13;

$(document).ready(function(){

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

＆＃13;

.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;
}

＆＃13;

  <div class="toggle-info">first div with info-icon</div>
  <div class="toggle-trigger"><a href="#">second div with toggle headline</a></div>

＆＃13;

＆＃13;

＆＃13;

此代码不起作用，我不知道为什么，你能帮助我吗？

谢谢！

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>