jQuery使相邻的div具有相同的高度

Question

我有一系列字段，例如：

<div class="field-label-inline">
  <div class="field-label">something1</div>
  <div class="field-items">
     <div class="field-item">sometext1</div>
  </div>
</div>
<div class="field-label-inline">
  <div class="field-label">something2</div>
  <div class="field-items">
     <div class="field-item">sometext2</div> 
</div>

我想让 .field-label div 的所有实例与相邻的 .field-items div 具有相同的高度（此 div 的高度根据其内容而异）。可悲的是，我的 jQuery 几乎不存在；这是我最好但失败的尝试：

$(document).ready(function(){    

  $('.field-label-inline > .field-label', this).each(function(){

    var itemsHeight = 0;

    itemsHeight = $(this + .field-items).height();

    $(this).height(itemsHeight);

  });
});

Answer 1

给你的 .field-label-inline 类一个固定的高度，比如 500px，然后给 .field-label 和 .field-items 一个 100% 的高度。我会在 css 中执行此操作，但 jquery 在下面。

$(".field-label-inline").css("height","500px");
$(".field-label").css("height","100%");
$(".field-items").css("height","100%");

Answer 2

最终。这行得通。不过，我不知道这是否是一个“好”的解决方案。

$(document).ready(function(){    

  $('.field-label-inline .field-label').each(function(){

  var itemsHeight = 0;

  itemsHeight = $(this).next().height();

  $(this).height(itemsHeight);

  });
});