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);

  });
});

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

2 个答案: