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

EDIT: Question shortened

编辑:问题缩短

I have two divs next to each other which are siblings. The height of the second div changes when the window is resized for mobile (one line of text within the div breaking into two lines).

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

Now I want to set the height of the first div according to the height of the second div.

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

In my case there are the following conditions which I can't rely on:

在我的情况下,有以下条件,我不能依赖:

• the divs only have classes so I can't use getelelementbyid()

  div只有类,所以我不能使用getelelementbyid()

• adding table / table-cell to a container and both divs won't work either because the toggle which is for what the divs are for would not open anymore

  将表/表格单元格添加到容器中,两个div都不起作用,因为用于div的forggle将不再打开

• I can't make the first div a child of the second div due to the functionality of the toggle

  由于切换功能,我无法使第一个div成为第二个div的子节点

So my guess was to do it with jQuery and I have the following code:

所以我的猜测是用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>

This code does not work and I don't know why, can you help me with that?

这段代码不起作用,我不知道为什么,你能帮帮我吗?

Thank you!

1 个解决方案

#1

You can pass a callback to the height method, inside which this will refer to the current toggle-info element so you can use $(this).next().outerHeight() inside the callback to get the height of the next sibling

你可以将一个回调传递给height方法,在这里它将引用当前的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>