Question

我在页面上有一些div.rows，每行都有一个包含图像的div和一个包含文本的div。我有一些jquery工作将文本div的高度应用于图像div，所以它们都是相同的高度。

然而，第一个文本div高度当前应用于页面上的所有图像div，我想要根据每行中的文本div计算高度。我发现了.each（function（）的引用，但显然没有正确设置 - 任何建议？

的jsfiddle： https://jsfiddle.net/iain_g/tw1ce03f/

jQuery(document).ready(function() {
  jQuery('div.row').each(function() {
    jQuery('div.feature-image').css('height', jQuery('div.feature-text').outerHeight() + 'px');
  });
});

.row {
  width: 200px;
  padding-bottom: 10px;
}

.feature-image,
.feature-text {
  width: 100px;
  float: left;
}

.feature-text {
  background: #999;
}

.feature-image {
  overflow: hidden;
}

img {
  display: block;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="feature-image"><img src="https://unsplash.it/200/300"></div>
  <div class="feature-text">
    <p>Nam qui sunt estias et faceatias elibea solorem reped et illuptu ritaes asit es pore re voluptature voluptist, veriosam imenecum ut et officae. Itat ipsus mi, ommoluptae.
    </p>
  </div>
  <p>quick clearfix</p>
</div>
<div class="row">
  <div class="feature-image"><img src="https://unsplash.it/200/300"></div>
  <div class="feature-text">
    <p>Nam qui sunt estias et faceatias elibea solorem reped et illuptu.
    </p>
  </div>
</div>

Answer 1

这是您的解决方案

jQuery('div.row').each(function() { 
var textHeight = $(this).find('.feature-text').outerHeight()
$(this).find('img').height(textHeight);
    });

干杯

.each（function（）表示div高度

1 个答案: